/*
 Theme Name:   Manufactory Child Theme
 Theme URI:    https://manufactory.axiomthemes.com/
 Description:  Manufactory Child Theme — BELLS&Construction
 Author:       AxiomThemes
 Author URI:   https://axiomthemes.com/
 Template:     manufactory
 Version:      1.0.0
 Tags:         business, construction, corporate, engineering, industrial
 Text Domain:  manufactory
*/


/* ================================================================
   MAPA ID STRON I SZABLONÓW ELEMENTOR

   CSS nie obsługuje zmiennych w selektorach (.page-id-X to nie da się
   zastąpić zmienną). Ten blok jest jedynym miejscem dokumentacji —
   gdy zmieni się ID strony w WP, znajdziesz tu wszystkie miejsca
   do aktualizacji w pliku.

   Aby znaleźć ID strony w WP:
     Kokpit → Strony → Edytuj → URL: post=XXXXX

   ──────────────────────────────────────────────────────────────
   STRONY WORDPRESS  (.page-id-XXXXX)
   ──────────────────────────────────────────────────────────────
   page-id-617     │ Polityka Prywatności │ Sekcja 18
                   │ Kolory tekstu (h5, h6, p, li, a),
                   │ tło sekcji Elementora

   page-id-18614   │ O nas                │ Sekcja 8 + 15
                   │ Tytuł h1 w nagłówku (font-size, kolor),
                   │ tekst w text-editor (historia firmy),
                   │ naprawa koloru tekstu stopki na tej stronie

   page-id-18638   │ Kontakt              │ Sekcja 15
                   │ Kolor ikon + danych kontaktowych
                   │ (widget trx_sc_icons, element d25fce4)

   ──────────────────────────────────────────────────────────────
   SZABLONY ELEMENTOR  (.elementor-XXXXX)
   ──────────────────────────────────────────────────────────────
   elementor-92     │ Header Default       │ Sekcja 8
                    │ Spacery (016eda4, 3317992, 75cf6d5),
                    │ logo overflow + scale

   elementor-32742  │ Footer Main Modern   │ Sekcja 6
                    │ Tło gradientowe z bg.png,
                    │ slogan (6de682de), spacery (cb2ee33,
                    │ 7e9603e1, 107a3a5c, 51d34941),
                    │ copyright (62337a2), ikony social

   ──────────────────────────────────────────────────────────────
   ELEMENTY ELEMENTOR  (.elementor-element-XXXXXXXX)
   ──────────────────────────────────────────────────────────────
   a31800e   │ Header: kontener logo (overflow visible)
   662ad86   │ Header: kolumna logo (overflow visible)
   b81cf62   │ Header: widget tytułu strony (sc_layouts_title)
   a3608d8   │ Header: strzałka scroll-down (chevron SVG) → ukryta
   d25fce4   │ Kontakt: widget ikon danych kontaktowych
   173752fe  │ Stopka: sekcja z tłem gradientowym + bg.png
   25c6b960  │ Stopka: wewnętrzna sekcja lewa → transparent
   118e980b  │ Stopka: wewnętrzna sekcja środkowa → transparent
   c2b5257   │ Stopka: wewnętrzna sekcja prawa → transparent
   6de682de  │ Stopka: slogan firmy (sc_item_title_text)
   62337a2   │ Stopka: wiersz copyright
   cb2ee33   │ Stopka: spacer separatora → 0px
   7e9603e1  │ Stopka: spacer górny → 20px
   107a3a5c  │ Stopka: spacer środkowy → 16px
   51d34941  │ Stopka: spacer dolny → 10px
================================================================ */


/* ================================================================
   BELLS&CONSTRUCTION — KOLORYSTYKA

   Zasada działania:
   Motyw Manufactory generuje CSS custom properties (--theme-color-*)
   osobno dla każdego schematu, np.:
     body.scheme_green_dark { --theme-color-bg_color: #172C27; }

   Poniżej nadpisujemy te zmienne dla każdego schematu używanego
   na stronie — zamiast walczyć z selektorami Elementora.

   Paleta BELLS:
     Tło główne:     #141414  (głęboka czerń)
     Tło sekcji:     #1A1A1A  (ciemny grafit)
     Tło kart:       #1E1E1E  (grafit)
     Akcent:         #828F72  (szałwiowa zieleń z busa)
     Srebro:         #B0B8C1
     Złoto:          #C9A227  (nawiązanie do logo W.Łania)
     Tekst główny:   #C8CCC8
     Tekst jasny:    #8A8F8A
================================================================ */


/* ----------------------------------------------------------------
   0. CZCIONKA GLOBALNA — Inter z pełnym wsparciem polskich znaków
   Ładowana przez functions.php z subsetem latin + latin-ext.
   Ustawiona na body (inheritance) + jawnie na nagłówkach i formularzu
   bo Elementor i motyw mogą nadpisywać font-family na tych elementach.
   ---------------------------------------------------------------- */

body {
    font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.sc_item_title_text,
.sc_layouts_title_caption {
    font-family: 'Inter', sans-serif !important;
}

input, textarea, select, button,
label, .wpcf7-form {
    font-family: 'Inter', sans-serif !important;
}


/* ----------------------------------------------------------------
   1. SCHEMAT GŁÓWNY STRONY (Site Color Scheme)
   Kiedy w Theme Options wybierzesz "Bells Dark", body dostaje
   klasę .scheme_bells_dark — poniższe zmienne są dla niego
   generowane przez functions.php.
   Nadpisanie dodatkowych zmiennych których PHP nie generuje:
   ---------------------------------------------------------------- */

body, .page_wrap, .body_wrap {
    background-color: #141414;
}


/* ----------------------------------------------------------------
   2. NADPISANIE SCHEMATU green_dark
   Sekcje w Elementorze z ustawionym "Green Dark" color scheme
   dostają klasę .scheme_green_dark. Poniżej zmieniamy ich kolory
   na paletę BELLS bez konieczności edytowania każdej sekcji.
   ---------------------------------------------------------------- */

.scheme_green_dark {
    --theme-color-bg_color:       #1A1A1A;
    --theme-color-bd_color:       #2E2E2E;
    --theme-color-text:           #C8CCC8;
    --theme-color-text_light:     #8A8F8A;
    --theme-color-text_dark:      #EAEAEA;
    --theme-color-text_link:      #828F72;
    --theme-color-text_hover:     #6B7960;
    --theme-color-text_link2:     #B0B8C1;
    --theme-color-text_hover2:    #C8D0D8;
    --theme-color-text_link3:     #C9A227;
    --theme-color-text_hover3:    #D4AF37;
    --theme-color-alter_bg_color: #1E1E1E;
    --theme-color-alter_bg_hover: #252525;
    --theme-color-alter_bd_color: #2E2E2E;
    --theme-color-alter_bd_hover: #828F72;
    --theme-color-alter_text:     #C8CCC8;
    --theme-color-alter_link:     #828F72;
    --theme-color-alter_hover:    #6B7960;
    --theme-color-extra_bg_color: #0D0D0D;
    --theme-color-extra_text:     #C8CCC8;
    --theme-color-extra_link:     #828F72;
    --theme-color-extra_hover:    #EAEAEA;
    --theme-color-input_bd_color: #3A3A3A;
    --theme-color-input_bd_hover: #828F72;
    --theme-color-input_text:     #C8CCC8;
    --theme-color-inverse_text:   #FFFFFF;
    --theme-color-inverse_link:   #FFFFFF;
    --theme-color-inverse_hover:  #EAEAEA;
}


/* ----------------------------------------------------------------
   3. NADPISANIE SCHEMATU dark
   Analogicznie dla sekcji z ustawionym "Dark" scheme.
   ---------------------------------------------------------------- */

.scheme_dark {
    --theme-color-bg_color:       #1A1A1A;
    --theme-color-bd_color:       #2E2E2E;
    --theme-color-text:           #C8CCC8;
    --theme-color-text_light:     #8A8F8A;
    --theme-color-text_dark:      #EAEAEA;
    --theme-color-text_link:      #828F72;
    --theme-color-text_hover:     #6B7960;
    --theme-color-text_link2:     #B0B8C1;
    --theme-color-text_hover2:    #C8D0D8;
    --theme-color-alter_bg_color: #1E1E1E;
    --theme-color-alter_bg_hover: #252525;
    --theme-color-alter_bd_color: #2E2E2E;
    --theme-color-alter_bd_hover: #828F72;
    --theme-color-alter_text:     #C8CCC8;
    --theme-color-alter_link:     #828F72;
    --theme-color-alter_hover:    #6B7960;
    --theme-color-extra_bg_color: #0D0D0D;
    --theme-color-extra_text:     #C8CCC8;
    --theme-color-extra_link:     #828F72;
    --theme-color-extra_hover:    #EAEAEA;
    --theme-color-input_bd_color: #3A3A3A;
    --theme-color-input_bd_hover: #828F72;
    --theme-color-input_text:     #C8CCC8;
    --theme-color-inverse_text:   #FFFFFF;
    --theme-color-inverse_link:   #FFFFFF;
    --theme-color-inverse_hover:  #EAEAEA;
}


/* ----------------------------------------------------------------
   4. MENU NAWIGACJI — tło i czytelność
   ---------------------------------------------------------------- */

/* Header — tło gdy strona jest przewinięta */
.top_panel_fixed,
.top_panel.fixed_height.scheme_bells_dark {
    background-color: rgba(20, 20, 20, 0.97) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Nagłówek (layout 92): trzy równe kolumny, dwie puste. Menu bierze całą szerokość, inaczej motyw zwija linki pod ikonę */
.elementor-92 .elementor-element-5350416 .elementor-element-b318fa8 {
    width: 100% !important;
}

.elementor-92 .elementor-element-662ad86,
.elementor-92 .elementor-element-7d7ded7 {
    display: none !important;
}

/* Główne linki menu (top-level) */
.sc_layouts_menu_nav > li > a,
.sc_layouts_menu_nav > li > a > span {
    color: #EAEAEA !important;
    font-family: 'Raleway', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Hover i aktywny link — akcent szałwiowy */
.sc_layouts_menu_nav > li > a:hover,
.sc_layouts_menu_nav > li > a:hover > span,
.sc_layouts_menu_nav > li.current-menu-item > a,
.sc_layouts_menu_nav > li.current-menu-item > a > span,
.sc_layouts_menu_nav > li.current-menu-ancestor > a,
.sc_layouts_menu_nav > li.current-menu-ancestor > a > span {
    color: #828F72 !important;
}

/* Kreska animowana (zoom_line) — kolor akcentu */
.sc_layouts_menu_default.menu_hover_zoom_line .sc_layouts_menu_nav > li > a::after {
    background-color: #828F72 !important;
}

/* Dropdown menu — tło panelu */
.sc_layouts_menu_nav .sub-menu,
.menu_main_nav_area .sub-menu,
nav ul.sub-menu {
    background-color: #1A1A1A !important;
    border-top: 2px solid #828F72 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Linki w dropdown */
.sc_layouts_menu_nav .sub-menu li a,
.sc_layouts_menu_nav .sub-menu li a span,
.menu_main_nav_area .sub-menu li a,
nav ul.sub-menu li a {
    color: #C8CCC8 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
}

.sc_layouts_menu_nav .sub-menu li a:hover,
.sc_layouts_menu_nav .sub-menu li a:hover span,
.menu_main_nav_area .sub-menu li a:hover,
nav ul.sub-menu li a:hover {
    color: #828F72 !important;
    background-color: #252525 !important;
}

/* Menu mobilne — tło panelu */
.menu_mobile_inner,
.menu_mobile .menu_mobile_inner {
    background-color: #141414 !important;
}

.menu_mobile_inner .menu_mobile_nav_area a,
.menu_mobile_inner a {
    color: #C8CCC8 !important;
}

.menu_mobile_inner .menu_mobile_nav_area a:hover {
    color: #828F72 !important;
}

/* Hamburger — widoczność na ciemnym tle */
.menu_mobile_button span,
.menu_mobile_button::before,
.menu_mobile_button::after {
    background-color: #EAEAEA !important;
}


/* ----------------------------------------------------------------
   5. PRZYCISKI CTA (dla całego motywu)
   ---------------------------------------------------------------- */

.sc_button,
a.sc_button,
.sc_button_default,
input[type="submit"],
button[type="submit"],
.elementor-button,
.elementor-button-link,
.wpcf7-form .wpcf7-submit,
.wpcf7-submit {
    background: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    border: 2px solid #828F72 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(130, 143, 114, 0.25) !important;
    transition: all 0.3s ease !important;
}

/* Ikonki w przyciskach - nie znikają przy hover */
.sc_button i,
.sc_button svg,
.elementor-button i,
.elementor-button svg,
.elementor-button-icon,
.wpcf7-submit i,
.wpcf7-submit svg {
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s ease !important;
}

.sc_button:hover,
a.sc_button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.elementor-button:hover,
.elementor-button-link:hover,
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-submit:hover {
    background: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
    border-color: #99A888 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(130, 143, 114, 0.45), 0 0 18px rgba(130, 143, 114, 0.35) !important;
}

/* Ikonki przy hover - pozostają widoczne */
.sc_button:hover i,
.sc_button:hover svg,
.elementor-button:hover i,
.elementor-button:hover svg,
.elementor-button:hover .elementor-button-icon,
.wpcf7-submit:hover i,
.wpcf7-submit:hover svg {
    opacity: 1 !important;
    visibility: visible !important;
}

.sc_button_bordered {
    background: transparent !important;
    border-color: #828F72 !important;
    color: #828F72 !important;
    box-shadow: none !important;
}

.sc_button_bordered:hover {
    background: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    color: #FFFFFF !important;
}


/* ----------------------------------------------------------------
   6. STOPKA
   ---------------------------------------------------------------- */

/* Tło zdjęcie na sekcjach Elementora wewnątrz stopki */
.elementor-32742 .elementor-element-173752fe:not(.elementor-motion-effects-element-type-background),
.elementor-32742 .elementor-element-173752fe > .elementor-motion-effects-container > .elementor-motion-effects-layer,
#footer .elementor-top-section:first-of-type,
.footer_wrap .elementor-top-section:first-of-type {
    background-color: #0D0D0D !important;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.97) 25%, rgba(10,10,10,0.88) 45%, rgba(10,10,10,0.1) 65%, rgba(10,10,10,0) 100%),
        url('../../uploads/2026/04/bg.png') !important;
    background-position: center right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Nakładki (overlay divy) — ukryte */
.elementor-32742 .elementor-section > .elementor-background-overlay {
    opacity: 0 !important;
}

/* Tła wewnętrznych sekcji — przezroczyste (NIE opacity, żeby treść była widoczna) */
.elementor-32742 .elementor-element-25c6b960:not(.elementor-motion-effects-element-type-background),
.elementor-32742 .elementor-element-25c6b960 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-32742 .elementor-element-118e980b:not(.elementor-motion-effects-element-type-background),
.elementor-32742 .elementor-element-118e980b > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-32742 .elementor-element-c2b5257:not(.elementor-motion-effects-element-type-background),
.elementor-32742 .elementor-element-c2b5257 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: transparent !important;
}

footer,
.footer_wrap,
#footer {
    background-color: #0D0D0D !important;
    position: relative;
}

/* Złota linia na górze stopki */
.footer_wrap::before,
#footer::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #C9A227 25%, #828F72 75%, transparent 100%);
    opacity: 0.55;
}



/* Slogan */
#footer .elementor-widget-trx_sc_title .sc_item_title,
#footer .elementor-widget-trx_sc_title .sc_item_title_text,
.footer_wrap .elementor-widget-trx_sc_title .sc_item_title,
.footer_wrap .elementor-widget-trx_sc_title .sc_item_title_text,
.elementor-32742 .elementor-element-6de682de .sc_item_title_text {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #8A8F8A !important;
    background-clip: unset !important;
    color: #8A8F8A !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em !important;
}

/* Nagłówki kolumn (Adres, Kontakt, Socials) */
.footer_wrap .widget-title,
.footer_wrap .widgettitle,
#footer .widget-title,
#footer .widgettitle,
.footer_wrap h4,
#footer h4 {
    color: #C9A227 !important;
    border-bottom: 1px solid rgba(201, 162, 39, 0.25) !important;
}

/* Linki w stopce */
.footer_wrap a,
#footer a {
    color: #8A8F8A !important;
}

.footer_wrap a:hover,
#footer a:hover {
    color: #C9A227 !important;
}

/* Tekst / adres */
.footer_wrap p,
.footer_wrap address,
#footer p,
#footer address {
    color: #8A8F8A !important;
}

/* E-mail i telefon */
.footer_wrap a[href^="mailto"],
.footer_wrap a[href^="tel"],
#footer a[href^="mailto"],
#footer a[href^="tel"] {
    color: #8A8F8A !important;
}

.footer_wrap a[href^="mailto"]:hover,
.footer_wrap a[href^="tel"]:hover,
#footer a[href^="mailto"]:hover,
#footer a[href^="tel"]:hover {
    color: #C9A227 !important;
}

/* Copyright */
.elementor-32742 .elementor-element-62337a2,
.footer_wrap .copyright,
#footer .copyright {
    color: #4A4A4A !important;
}

/* Linia pozioma w stopce */
.footer_wrap .elementor-divider-separator,
#footer .elementor-divider-separator {
    border-color: rgba(201, 162, 39, 0.2) !important;
}

/* Ikony social media — kółko obramowania zawsze widoczne w stopce
   Reguła z __plugins.css używa var(--theme-color-text_dark_015), która
   nie jest rozwiązana na stronach Kontakt i O nas — nadpisujemy wartością wprost */
.elementor-32742 .sc_socials.sc_socials_default .socials_wrap .social_item .social_icon {
    border: 1px solid rgba(234, 234, 234, 0.15) !important;
    color: #EAEAEA !important;
}

.footer_inner {
    border-top-color: #2E2E2E !important;
}


/* ----------------------------------------------------------------
   7. LOGO HEADER — powiększone przez transform (wysokość headera bez zmian)
   transform: scale() powiększa wizualnie bez zmiany flow layoutu
   ---------------------------------------------------------------- */

/* Kontener logo — zezwól na overflow żeby obraz mógł wystawać */
.sc_layouts_logo_default,
.sc_layouts_item:has(.sc_layouts_logo),
.elementor-element-a31800e,
.elementor-element-a31800e .elementor-widget-container,
.elementor-element-662ad86 .elementor-widget-wrap {
    overflow: visible !important;
}

/* Logo — skalowane 1.8× w górę, widoczniejsze, jasniejsze */
.sc_layouts_logo_default img.logo_image,
.sc_layouts_logo img.logo_image,
img.logo_image {
    transform: scale(1.8) !important;
    transform-origin: center center !important;
    filter: brightness(1.25) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6)) !important;
    position: relative !important;
    z-index: 20 !important;
    transition: filter 0.3s ease, transform 0.3s ease !important;
}

.sc_layouts_logo_default img.logo_image:hover,
.sc_layouts_logo img.logo_image:hover,
img.logo_image:hover {
    transform: scale(1.88) !important;
    filter: brightness(1.4) drop-shadow(0 2px 16px rgba(130, 143, 114, 0.4)) !important;
}


/* ----------------------------------------------------------------
   8. LOGO W.ŁANIA — złoty glow w sekcji historii
   Dodaj klasę "bells-wlania-logo" do obrazka w Elementorze
   (Advanced → CSS Classes)
   ---------------------------------------------------------------- */

.bells-wlania-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 12px rgba(201, 162, 39, 0.4));
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.bells-wlania-logo:hover {
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.65));
}


/* ----------------------------------------------------------------
   8. NAGŁÓWEK STRONY "O NAS" (page-id-18614)
   Cel: upodobnienie do nagłówka stron usług (cpt_services)
   HTML: header#92 > section#82586d5 > col#5917004
         > section#a306273 > col#0e15706 > widget#b81cf62
         > .sc_layouts_title > h1.sc_layouts_title_caption
   Przyczyna: body_style_fullscreen zmienia bazowy font-size kontekstu,
   without_bg_image powoduje prześwitywanie tła strony przez header
   ---------------------------------------------------------------- */

/* Sekcja z tytułem — usuń boxed max-width, dopasuj wysokość */
.page-id-18614 .elementor-element-a306273 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tło ciemne dla sekcji tytułu — żeby tytuł był czytelny jak na services */
.page-id-18614 .elementor-element-a306273 > .elementor-container {
    background-color: transparent !important;
}

/* H1 — precyzyjny selektor przez ID widgetu + klasa body */
.page-id-18614 .elementor-element-b81cf62 .sc_layouts_title_caption,
.page-id-18614 .sc_layouts_title_caption {
    font-size: 57px !important;
    line-height: 1em !important;
    letter-spacing: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: #EAEAEA !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7) !important;
}

/* Kontener tytułu — wyśrodkowanie */
.page-id-18614 .elementor-element-b81cf62 .sc_layouts_title_content,
.page-id-18614 .sc_layouts_title_content {
    text-align: center !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
}

/* Spacery nagłówka — globalne zerowanie żeby wszystkie strony wyglądały jak services/portfolio
   (services/portfolio mają je już 0 via JS motywu, tu wyrównujemy reszta stron) */
.elementor-92 .elementor-element-016eda4 .elementor-spacer-inner,
.elementor-92 .elementor-element-3317992 .elementor-spacer-inner,
.elementor-92 .elementor-element-75cf6d5 .elementor-spacer-inner {
    height: 0 !important;
}

/* Spacery stopki — zmniejszone z wartości domyślnych motywu:
   cb2ee33: 3.5vw → 0 (separator przed stopką)
   7e9603e1: 80px (sc_height_large z __responsive.css) → 20px
   107a3a5c: ~52px (--spacer-size Elementora) → 16px
   51d34941: 20px → 10px */
.elementor-32742 .elementor-element-cb2ee33 .elementor-spacer-inner {
    height: 0 !important;
}

.elementor-32742 .elementor-element-7e9603e1 .elementor-spacer-inner {
    height: 20px !important;
}

.elementor-32742 .elementor-element-107a3a5c .elementor-spacer-inner {
    height: 16px !important;
}

.elementor-32742 .elementor-element-51d34941 .elementor-spacer-inner {
    height: 10px !important;
}


/* ----------------------------------------------------------------
   9. FORMULARZ KONTAKTOWY — kompletna stylizacja
   ---------------------------------------------------------------- */

/* Wszystkie pola formularza — styl bazowy */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea,
.wpcf7-form-control-wrap select {
    background-color: #1E1E1E !important;
    border: 1px solid #3A3A3A !important;
    color: #D4AF37 !important;
    padding: 12px 18px !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

/* Textarea — większy minimalny rozmiar */
textarea,
.wpcf7-form-control-wrap textarea {
    min-height: 140px !important;
    resize: vertical !important;
}

/* Placeholder — złotawy szary */
input::placeholder,
textarea::placeholder {
    color: #B09A5B !important;
    opacity: 0.6 !important;
}

/* Hover — subtelne podświetlenie obramowania */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
select:hover,
textarea:hover,
.wpcf7-form-control-wrap input:hover,
.wpcf7-form-control-wrap textarea:hover,
.wpcf7-form-control-wrap select:hover {
    border-color: #4A4F4A !important;
}

/* Focus — złote podświetlenie z glow */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus,
.wpcf7-form-control-wrap select:focus {
    border-color: #D4AF37 !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2), 0 0 12px rgba(212, 175, 55, 0.15) !important;
    outline: none !important;
    background-color: #252525 !important;
}

/* Select — strzałka w kolorze złotym */
select,
.wpcf7-form-control-wrap select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23D4AF37' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    padding-right: 45px !important;
}

/* Checkboxy i radio — złoty akcent */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #D4AF37 !important;
    width: auto !important;
}

.wpcf7-list-item-label,
.wpcf7-acceptance .wpcf7-list-item-label {
    color: #D4AF37 !important;
    margin-left: 8px !important;
}

/* Przyciski submit — szałwiowa zieleń z efektami błyszczenia */
form input[type="submit"],
form button[type="submit"],
.wpcf7-form input[type="submit"],
.wpcf7-submit {
    background: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    border: 2px solid #828F72 !important;
    color: #FFFFFF !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(130, 143, 114, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
}

form input[type="submit"]:hover,
form button[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover {
    background: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
    border-color: #99A888 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(130, 143, 114, 0.45), 0 0 18px rgba(130, 143, 114, 0.35) !important;
}

/* Active (kliknięcie) — intensywne błyszczenie */
form input[type="submit"]:active,
form button[type="submit"]:active,
.wpcf7-form input[type="submit"]:active,
.wpcf7-submit:active {
    background: linear-gradient(135deg, #A8B899 0%, #99A888 100%) !important;
    transform: translateY(0px) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(130, 143, 114, 0.55), 0 0 28px rgba(130, 143, 114, 0.65), inset 0 0 20px rgba(255, 255, 255, 0.35) !important;
}

/* Komunikaty Contact Form 7 — błędy i sukcesy */
.wpcf7 form span.wpcf7-not-valid-tip {
    color: #D4AF37 !important;
    font-size: 13px !important;
    margin-top: 4px !important;
    display: block !important;
}

/* Kolor jak etykieta zgody. Motyw ma tu !important na klasach trx_addons_message_box_*, stąd takie selektory */
.wpcf7 form.wpcf7-form .wpcf7-response-output,
.wpcf7 form.wpcf7-form .trx_addons_message_box.wpcf7-response-output.trx_addons_message_box_error,
.wpcf7 form.wpcf7-form .trx_addons_message_box.wpcf7-response-output.trx_addons_message_box_success {
    margin: 16px 0 0 0 !important;
    padding: 12px 18px !important;
    border: 1px solid #D4AF37 !important;
    border-radius: 4px !important;
    background-color: #1E1E1E !important;
    color: #D4AF37 !important;
    font-size: 14px !important;
}

/* Spinner ładowania CF7 — szałwiowa zieleń */
.wpcf7-spinner {
    border-color: rgba(130, 143, 114, 0.3) !important;
    border-left-color: #828F72 !important;
}

/* Labels — etykiety pól w złotym kolorze */
form label,
.wpcf7-form label {
    color: #D4AF37 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Required asterisk — gwiazdka wymaganego pola */
.wpcf7-form .wpcf7-not-valid {
    border-color: #E57373 !important;
}

/* Autocomplete styling dla przeglądarek — złoty tekst */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #D4AF37 !important;
    -webkit-box-shadow: 0 0 0px 1000px #1E1E1E inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Formularz w widgecie lub sidebarze — zmniejszone paddingi */
.widget form input,
.widget form textarea,
.widget form select,
aside form input,
aside form textarea,
aside form select {
    padding: 10px 14px !important;
    font-size: 14px !important;
}


/* ----------------------------------------------------------------
   9. NADPISANIE STYLÓW ELEMENTOR FORM (wysoka specyficzność)
   ---------------------------------------------------------------- */

/* Elementor Form - przyciski submit - MAKSYMALNA SPECYFICZNOŚĆ */
.elementor-element .elementor-field-type-submit .elementor-button,
.elementor-element .elementor-field-type-submit button,
.elementor-field-type-submit .elementor-button,
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl,
div.elementor-element .elementor-button,
.elementor-form .elementor-button,
.elementor-widget-form .elementor-button,
button.elementor-button[type="submit"] {
    background: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    background-color: #828F72 !important;
    background-image: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    border: 2px solid #828F72 !important;
    border-color: #828F72 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(130, 143, 114, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Nadpisanie inline styles dla czerwonego koloru */
.elementor-button[style*="background"],
.elementor-button[style*="background-color"] {
    background: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    background-color: #828F72 !important;
}

/* Hover state - z błyszczeniem */
.elementor-element .elementor-field-type-submit .elementor-button:hover,
.elementor-element .elementor-field-type-submit button:hover,
.elementor-field-type-submit .elementor-button:hover,
.elementor-button.elementor-size-sm:hover,
.elementor-button.elementor-size-md:hover,
.elementor-button.elementor-size-lg:hover,
.elementor-button.elementor-size-xl:hover,
div.elementor-element .elementor-button:hover,
.elementor-form .elementor-button:hover,
.elementor-widget-form .elementor-button:hover,
button.elementor-button[type="submit"]:hover {
    background: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
    background-color: #99A888 !important;
    background-image: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
    border-color: #99A888 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(130, 143, 114, 0.45), 0 0 18px rgba(130, 143, 114, 0.35) !important;
}

/* Active/Click state */
.elementor-element .elementor-field-type-submit .elementor-button:active,
.elementor-field-type-submit .elementor-button:active,
.elementor-form .elementor-button:active,
.elementor-widget-form .elementor-button:active,
button.elementor-button[type="submit"]:active {
    background: linear-gradient(135deg, #A8B899 0%, #99A888 100%) !important;
    background-color: #A8B899 !important;
    background-image: linear-gradient(135deg, #A8B899 0%, #99A888 100%) !important;
    transform: translateY(0px) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(130, 143, 114, 0.55), 0 0 28px rgba(130, 143, 114, 0.65), inset 0 0 20px rgba(255, 255, 255, 0.35) !important;
}

/* Ikonki w przyciskach Elementor - zawsze widoczne */
.elementor-button .elementor-button-icon,
.elementor-button .elementor-button-icon svg,
.elementor-button .elementor-button-icon i,
.elementor-button i,
.elementor-button svg {
    position: relative !important;
    z-index: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    transition: all 0.3s ease !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.elementor-button:hover .elementor-button-icon,
.elementor-button:hover .elementor-button-icon svg,
.elementor-button:hover .elementor-button-icon i,
.elementor-button:hover i,
.elementor-button:hover svg,
.elementor-button:active .elementor-button-icon,
.elementor-button:active i,
.elementor-button:active svg {
    position: relative !important;
    z-index: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}


/* ----------------------------------------------------------------
   10. RESET KOLORÓW ELEMENTOR - nadpisanie inline styles
   ---------------------------------------------------------------- */

/* BARDZO WYSOKA SPECYFICZNOŚĆ - nadpisanie wszystkich przycisków Elementor */
.elementor-element.elementor-element .elementor-button,
.elementor-widget-button .elementor-button,
.elementor-column .elementor-button,
.elementor-section .elementor-button,
div.elementor-widget-wrap .elementor-button,
.elementor-button-wrapper .elementor-button,
.elementor-button-primary,
.elementor-button-secondary,
.elementor-button-success,
.elementor-button-info,
.elementor-button-warning,
.elementor-button-danger,
a.elementor-button,
.elementor-button-link,
button.elementor-button,
.elementor-button.elementor-button {
    background: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    background-color: #828F72 !important;
    background-image: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    border-color: #828F72 !important;
    box-shadow: 0 2px 8px rgba(130, 143, 114, 0.25) !important;
}

/* Hover states */
.elementor-element.elementor-element .elementor-button:hover,
.elementor-widget-button .elementor-button:hover,
.elementor-column .elementor-button:hover,
.elementor-section .elementor-button:hover,
div.elementor-widget-wrap .elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover,
.elementor-button-primary:hover,
.elementor-button-secondary:hover,
.elementor-button-success:hover,
.elementor-button-info:hover,
.elementor-button-warning:hover,
.elementor-button-danger:hover,
a.elementor-button:hover,
.elementor-button-link:hover,
button.elementor-button:hover,
.elementor-button.elementor-button:hover {
    background: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
    background-color: #99A888 !important;
    background-image: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
    border-color: #99A888 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(130, 143, 114, 0.45), 0 0 18px rgba(130, 143, 114, 0.35) !important;
}

/* Active states */
.elementor-element.elementor-element .elementor-button:active,
.elementor-widget-button .elementor-button:active,
.elementor-button:active {
    background: linear-gradient(135deg, #A8B899 0%, #99A888 100%) !important;
    background-color: #A8B899 !important;
    background-image: linear-gradient(135deg, #A8B899 0%, #99A888 100%) !important;
    transform: translateY(0px) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(130, 143, 114, 0.55), 0 0 28px rgba(130, 143, 114, 0.65), inset 0 0 20px rgba(255, 255, 255, 0.35) !important;
}

/* Specjalnie dla czerwonych i różowych przycisków - wszystkie możliwe warianty */
.elementor-button-danger,
.elementor-button[style*="#e2498a"],
.elementor-button[style*="#E2498A"],
.elementor-button[style*="rgb(226, 73, 138)"],
.elementor-button[style*="#ff0000"],
.elementor-button[style*="#FF0000"],
.elementor-button[style*="red"],
a[style*="#e2498a"].elementor-button,
button[style*="#e2498a"].elementor-button {
    background: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    background-color: #828F72 !important;
    background-image: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
}

.elementor-button-danger:hover,
.elementor-button[style*="#e2498a"]:hover,
.elementor-button[style*="#E2498A"]:hover,
.elementor-button[style*="rgb(226, 73, 138)"]:hover,
a[style*="#e2498a"].elementor-button:hover {
    background: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
    background-color: #99A888 !important;
    background-image: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
}

/* ----------------------------------------------------------------
   11. STRONY PORTFOLIO — akcenty kolorystyczne BELLS
   ---------------------------------------------------------------- */

/* Tytuł realizacji — złoty kolor */
.bells-portfolio-page .portfolio_page_title,
.single-cpt_portfolio .portfolio_page_title {
    color: #C9A227 !important;
}

/* Podtytuł / subtitle — szałwiowy */
.bells-portfolio-page .portfolio_page_subtitle,
.single-cpt_portfolio .portfolio_page_subtitle {
    color: #828F72 !important;
    border-left: 3px solid #828F72;
    padding-left: 12px;
}

/* Panel szczegółów po prawej — delikatna złota linia na górze */
.bells-portfolio-page .portfolio_page_details_wrap,
.single-cpt_portfolio .portfolio_page_details_wrap {
    border-top: 2px solid #C9A227;
    padding-top: 28px;
}

/* Etykiety szczegółów (Klient, Rok, Czas realizacji) — złoty */
.bells-portfolio-page .portfolio_page_details .portfolio_page_details_label,
.bells-portfolio-page .portfolio_page_details dt,
.single-cpt_portfolio .portfolio_page_details dt,
.single-cpt_portfolio .portfolio_page_details .portfolio_page_details_label {
    color: #C9A227 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.8px;
}

/* Wartości szczegółów — tekst jaśniejszy */
.bells-portfolio-page .portfolio_page_details .portfolio_page_details_value,
.bells-portfolio-page .portfolio_page_details dd,
.single-cpt_portfolio .portfolio_page_details dd,
.single-cpt_portfolio .portfolio_page_details .portfolio_page_details_value {
    color: #EAEAEA !important;
}

/* Opis realizacji (excerpt) — lewy border w kolorze szałwiowym */
.bells-portfolio-page .portfolio_page_description,
.single-cpt_portfolio .portfolio_page_description {
    border-left: 3px solid #828F72;
    padding-left: 16px;
    color: #C8CCC8;
    font-style: italic;
    margin-bottom: 24px;
}

/* Nagłówek treści (Lorem ipsum dolor itp.) — szałwiowy akcent */
.bells-portfolio-page .portfolio_page_content h2,
.bells-portfolio-page .portfolio_page_content h3,
.single-cpt_portfolio .portfolio_page_content h2,
.single-cpt_portfolio .portfolio_page_content h3 {
    color: #EAEAEA;
    position: relative;
    padding-bottom: 12px;
}

.bells-portfolio-page .portfolio_page_content h2::after,
.bells-portfolio-page .portfolio_page_content h3::after,
.single-cpt_portfolio .portfolio_page_content h2::after,
.single-cpt_portfolio .portfolio_page_content h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, #828F72, transparent);
}

/* Linki w treści portfolio — szałwiowy */
.bells-portfolio-page .portfolio_page_content a,
.single-cpt_portfolio .portfolio_page_content a {
    color: #828F72 !important;
}

.bells-portfolio-page .portfolio_page_content a:hover,
.single-cpt_portfolio .portfolio_page_content a:hover {
    color: #C9A227 !important;
}

/* Ikonki social share — szałwiowy */
.bells-portfolio-page .portfolio_page_details .socials_share a,
.single-cpt_portfolio .portfolio_page_details .socials_share a {
    color: #828F72 !important;
    border-color: #3A3A3A !important;
}

.bells-portfolio-page .portfolio_page_details .socials_share a:hover,
.single-cpt_portfolio .portfolio_page_details .socials_share a:hover {
    color: #C9A227 !important;
    border-color: #C9A227 !important;
}

/* "Next Project" link — szałwiowy z hover złotym */
.bells-portfolio-page .portfolio_page_next,
.single-cpt_portfolio .portfolio_page_next,
.bells-portfolio-page .portfolio_page_next a,
.single-cpt_portfolio .portfolio_page_next a {
    color: #828F72 !important;
}

.bells-portfolio-page .portfolio_page_next a:hover,
.single-cpt_portfolio .portfolio_page_next a:hover {
    color: #C9A227 !important;
}


/* ----------------------------------------------------------------
   12. BLOG — STRONA POSTA I LISTA WPISÓW
   ---------------------------------------------------------------- */

/* Tło strony posta — transparentne jak na service/portfolio */
.single-post .page_content_wrap,
.blog .page_content_wrap,
.archive .page_content_wrap {
    background-color: transparent;
}

/* Ukryj cały nagłówek posta w headerze (zdjęcie + data + kategoria nad treścią) */
.single-post .post_header_wrap_in_header {
    display: none !important;
}

/* Tytuł wpisu — nagłówki jasne */
.single-post .post_header .post_title,
.single-post h1.post_title,
.blog .post_title,
.blog .post_title a,
.archive .post_title a {
    color: #EAEAEA !important;
}

.single-post .post_title a:hover,
.blog .post_title a:hover,
.archive .post_title a:hover {
    color: #828F72 !important;
}

/* Treść posta — czytelny jasny tekst */
.single-post .post_content,
.single-post .entry-content,
.single-post article .post_content p,
.single-post article p,
.single-post .post_descr {
    color: #C8CCC8 !important;
    line-height: 1.8;
    font-size: 16px;
}

/* Nagłówki w treści posta */
.single-post .post_content h1,
.single-post .post_content h2,
.single-post .post_content h3,
.single-post .post_content h4,
.single-post .post_content h5,
.single-post .post_content h6,
.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 {
    color: #EAEAEA !important;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

/* Linki w treści posta */
.single-post .post_content a,
.single-post .entry-content a {
    color: #828F72 !important;
    text-decoration: underline;
    text-decoration-color: rgba(130, 143, 114, 0.4);
}

.single-post .post_content a:hover,
.single-post .entry-content a:hover {
    color: #C9A227 !important;
    text-decoration-color: rgba(201, 162, 39, 0.5);
}

/* Meta wpisu (data, autor, kategorie) */
.post_meta,
.post_meta_label,
.post_info,
.post_info .post_info_item,
.post_info .post_info_item a,
.single-post .post_meta .post_info_item,
.single-post .post_meta_item {
    color: #8A8F8A !important;
    font-size: 13px;
}

.post_info .post_info_item a:hover,
.single-post .post_meta a:hover {
    color: #828F72 !important;
}

/* Separator między meta elementami */
.post_info_item + .post_info_item::before {
    color: #3A3A3A !important;
}

/* Tło karty posta — transparentne, bez ramki */
.blog article.post,
.archive article.post,
.single-post article.post {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Featured image — obramowanie */
.single-post .post_featured img,
.blog .post_featured img {
    border-bottom: 2px solid #2E2E2E;
}

/* Kategorie / tagi posta */
.post_categories a,
.post_tags a,
.post_category a {
    color: #828F72 !important;
    background-color: rgba(130, 143, 114, 0.12) !important;
    border: 1px solid rgba(130, 143, 114, 0.3) !important;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 12px;
}

.post_categories a:hover,
.post_tags a:hover {
    background-color: rgba(130, 143, 114, 0.25) !important;
    color: #EAEAEA !important;
}

/* "You May Also Like" — tytuł sekcji powiązanych postów */
.related_wrap_title,
h3.related_wrap_title,
.related_wrap .section_title {
    color: #C9A227 !important;
}

/* Tagi posta — ukryte */
.post_tags_single,
.post_footer .post_tags_single {
    display: none !important;
}

/* Poprzedni / następny wpis */
.nav-links .nav-previous a,
.nav-links .nav-next a,
.posts-navigation a,
.post_nav a {
    color: #828F72 !important;
}

.nav-links .nav-previous a:hover,
.nav-links .nav-next a:hover,
.posts-navigation a:hover,
.post_nav a:hover {
    color: #C9A227 !important;
}

/* SIDEBAR — jedno spójne tło na całym kontenerze */
.widget_area,
.sidebar.widget_area,
.right_sidebar,
.sidebar_inner,
aside.widget_area {
    background-color: #1A1A1A !important;
    border-radius: 6px !important;
    padding: 10px !important;
}

/* Widżety wewnątrz — bez własnych teł i ramek */
.widget_area .widget,
.sidebar.widget_area .widget,
.right_sidebar .widget,
.sidebar_inner .widget,
aside.widget_area .widget {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 32px !important;
    box-shadow: none !important;
}

.widget_area .widget:last-child,
.sidebar.widget_area .widget:last-child,
.right_sidebar .widget:last-child,
aside.widget_area .widget:last-child {
    margin-bottom: 0 !important;
}

/* Cienka linia między widżetami */
.widget_area .widget + .widget,
.sidebar.widget_area .widget + .widget,
.right_sidebar .widget + .widget,
aside.widget_area .widget + .widget {
    border-top: 1px solid #2E2E2E !important;
    padding-top: 28px !important;
}

/* Tytuły widżetów — szałwiowy */
/* Precyzyjny selektor z HTML: .sidebar_inner > aside.widget > h5.widget_title */
.sidebar_inner h5.widget_title,
.sidebar_inner .widget_title,
.sidebar_inner aside h5,
h5.widget_title,
.widget_title,
.widget_area .widgettitle,
.widget_area .widget-title,
.widget_area .widget_title,
.sidebar.widget_area .widgettitle,
.sidebar.widget_area .widget-title,
.right_sidebar .widgettitle,
.right_sidebar .widget-title,
.right_sidebar .widget_title,
.sidebar_inner .widgettitle,
.sidebar_inner .widget-title,
aside.widget_area .widgettitle,
aside.widget_area .widget-title,
.widget_area h5.widget_title,
.widget_area h4.widgettitle,
.widget_area h3.widgettitle,
.widget_area h2.widgettitle {
    color: #828F72 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-bottom: 1px solid rgba(130, 143, 114, 0.25) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
}

/* Linki w sidebarze */
.widget_area .widget a,
.right_sidebar .widget a,
aside.widget_area .widget a {
    color: #B0B8C1 !important;
    text-decoration: none !important;
}

.widget_area .widget a:hover,
.right_sidebar .widget a:hover,
aside.widget_area .widget a:hover {
    color: #828F72 !important;
}

/* Tekst i listy */
.widget_area .widget p,
.widget_area .widget li,
.right_sidebar .widget p,
.right_sidebar .widget li {
    color: #8A8F8A !important;
    font-size: 14px;
    line-height: 1.6;
}

/* Lista widżetów — delikatny separator */
.widget_area .widget ul li,
.right_sidebar .widget ul li {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 6px 0;
}

.widget_area .widget ul li:last-child,
.right_sidebar .widget ul li:last-child {
    border-bottom: none;
}

/* Wyszukiwarka */
.widget_area .widget .search-field,
.widget_area .widget input[type="search"],
.right_sidebar .widget input[type="search"] {
    background-color: #252525 !important;
    border: 1px solid #3A3A3A !important;
    color: #C8CCC8 !important;
    border-radius: 4px !important;
}

/* Licznik kategorii */
.widget_area .cat-item .cat-count,
.right_sidebar .cat-item .cat-count {
    color: #828F72 !important;
    font-size: 12px;
}

/* Recent Posts — tytuł miniaturowy */
.widget_area .widget_recent_entries ul li a,
.right_sidebar .widget_recent_entries ul li a {
    color: #C8CCC8 !important;
    font-size: 13px;
    line-height: 1.4;
}

.widget_area .widget_recent_entries ul li a:hover,
.right_sidebar .widget_recent_entries ul li a:hover {
    color: #828F72 !important;
}

/* Data przy recent posts */
.widget_area .widget_recent_entries ul li .post-date,
.right_sidebar .widget_recent_entries ul li .post-date {
    color: #4A4A4A !important;
    font-size: 12px;
    display: block;
    margin-top: 2px;
}


/* ----------------------------------------------------------------
   13. UKRYCIE KOMENTARZY
   ---------------------------------------------------------------- */

/* Ukryj sekcję komentarzy i formularz dodawania komentarza */
#comments,
.comments_wrap,
.comments-area,
.comment-respond,
#respond,
.comments_list_wrap,
.comments_form_wrap,
.post_comments,
.section_comments {
    display: none !important;
}


/* ----------------------------------------------------------------
   14. FORMULARZ KONTAKTOWY W SIDEBARZE PORTFOLIO
   ---------------------------------------------------------------- */

.bells-portfolio-contact-form {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #2E2E2E;
}

/* Tytuł formularza — złoty z ozdobnikiem */
.bells-portfolio-contact-form__title {
    color: #C9A227 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 20px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bells-portfolio-contact-form__title::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: #828F72;
    flex-shrink: 0;
}

/* Pola formularza w sidebarze — kompaktowe */
.bells-portfolio-contact-form input[type="text"],
.bells-portfolio-contact-form input[type="email"],
.bells-portfolio-contact-form input[type="tel"],
.bells-portfolio-contact-form textarea,
.bells-portfolio-contact-form .wpcf7-form-control-wrap input,
.bells-portfolio-contact-form .wpcf7-form-control-wrap textarea {
    padding: 10px 14px !important;
    font-size: 14px !important;
    background-color: #1A1A1A !important;
    border-color: #2E2E2E !important;
}

.bells-portfolio-contact-form textarea,
.bells-portfolio-contact-form .wpcf7-form-control-wrap textarea {
    min-height: 100px !important;
}

.bells-portfolio-contact-form input[type="text"]:focus,
.bells-portfolio-contact-form input[type="email"]:focus,
.bells-portfolio-contact-form input[type="tel"]:focus,
.bells-portfolio-contact-form textarea:focus {
    border-color: #C9A227 !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15) !important;
    background-color: #1E1E1E !important;
}

/* Przycisk submit w sidebarze portfolio — pełna szerokość */
.bells-portfolio-contact-form .wpcf7-submit,
.bells-portfolio-contact-form input[type="submit"] {
    width: 100% !important;
    margin-top: 4px !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
}


/* Klasa dodana przez JavaScript - maksymalna pewność nadpisania */
.bells-button-override,
.bells-button-override.elementor-button,
button.bells-button-override,
a.bells-button-override {
    background: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    background-color: #828F72 !important;
    background-image: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    border-color: #828F72 !important;
    color: #FFFFFF !important;
}

.bells-button-override:hover,
.bells-button-override.elementor-button:hover,
button.bells-button-override:hover,
a.bells-button-override:hover {
    background: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
    background-color: #99A888 !important;
    background-image: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
    border-color: #99A888 !important;
}

.bells-button-override:active,
.bells-button-override.elementor-button:active {
    background: linear-gradient(135deg, #A8B899 0%, #99A888 100%) !important;
    background-color: #A8B899 !important;
    background-image: linear-gradient(135deg, #A8B899 0%, #99A888 100%) !important;
}


/* ================================================================
   13. KOMPONENTY — akcentowanie palety BELLS
   Generyczne selektory komponentów motywu (nie page-specific).
================================================================ */


/* ----------------------------------------------------------------
   13a. LICZNIKI (sc_counter) — ikony szałwiowe, liczby złote
   ---------------------------------------------------------------- */

.sc_counter_icon,
.sc_counter_icon i,
.sc_counter_icon svg {
    color: #828F72 !important;
    fill: #828F72 !important;
}

.sc_counter_item_value,
.sc_counter_item_value .sc_counter_value {
    color: #C9A227 !important;
}

.sc_counter_item_title {
    color: #8A8F8A !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

/* Subtelna złota linia nad całą sekcją liczników */
.sc_counter {
    border-top: 1px solid rgba(201, 162, 39, 0.15);
    border-bottom: 1px solid rgba(201, 162, 39, 0.15);
}


/* ----------------------------------------------------------------
   13b. TESTIMONIALE — czytelny tekst na ciemnym tle
   ---------------------------------------------------------------- */

.sc_testimonials_item_content,
.sc_testimonials_item_content p,
.sc_testimonials .sc_item_content,
blockquote.sc_testimonials_item_content {
    color: #C8CCC8 !important;
    font-style: italic !important;
    line-height: 1.75 !important;
}

/* Cudzysłów dekoracyjny — złoty */
.sc_testimonials_item_content::before,
.sc_testimonials_item_content::after {
    color: rgba(201, 162, 39, 0.35) !important;
}

.sc_testimonials_item_author_title,
.sc_testimonials_item_author .sc_testimonials_item_author_title {
    color: #828F72 !important;
    font-weight: 600 !important;
}

.sc_testimonials_item_author_info,
.sc_testimonials_item_position,
.sc_testimonials_item_company {
    color: #8A8F8A !important;
    font-size: 12px !important;
}

/* Gwiazdki ocen — złoto */
.sc_testimonials_item_rating .sc_icon_type_icons,
.sc_testimonials_item_rating i {
    color: #C9A227 !important;
}

/* Strzałki nawigacji (prev/next) */
.sc_testimonials_controls .sc_testimonials_control_prev,
.sc_testimonials_controls .sc_testimonials_control_next {
    color: #828F72 !important;
    border-color: rgba(130, 143, 114, 0.4) !important;
}

.sc_testimonials_controls .sc_testimonials_control_prev:hover,
.sc_testimonials_controls .sc_testimonials_control_next:hover {
    color: #C9A227 !important;
    border-color: #C9A227 !important;
}


/* ----------------------------------------------------------------
   13c. SEKCJA HISTORII — "1967" i opisy
   Uwaga: jeśli "1967" nadal czerwone — zmień kolor w Elementorze:
   widget Style → Title Color → #C9A227
   ---------------------------------------------------------------- */

/* Etykieta "POCZĄTEK" pod 1967 — szałwiowa */
.sc_item_subtitle,
.sc_item_label,
.sc_title_subtitle {
    color: #828F72 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

/* Tekst misji — normalny kolor akapitu */
.sc_item_description,
.sc_item_descr {
    color: #C8CCC8 !important;
    line-height: 1.8 !important;
}


/* ----------------------------------------------------------------
   13d. TYTUŁY SEKCJI — złota linia pod spodem
   ---------------------------------------------------------------- */

/* Nagłówki sekcji — jaśniejsze */
.sc_item_title .sc_item_title_text {
    color: #EAEAEA !important;
}

/* Złota kreska pod tytułem sekcji (separator dekoracyjny) */
.sc_item_title_divider,
.sc_item_title_line {
    background: linear-gradient(90deg, #C9A227 0%, #828F72 60%, transparent 100%) !important;
    height: 2px !important;
    opacity: 0.6 !important;
}


/* ----------------------------------------------------------------
   13e. BLOG / AKTUALNOŚCI
   ---------------------------------------------------------------- */

/* Tytuły postów */
.post_title a,
.entry-title a,
.blog_item .post_title a {
    color: #EAEAEA !important;
    transition: color 0.25s ease !important;
    text-decoration: none !important;
}

.post_title a:hover,
.entry-title a:hover,
.blog_item .post_title a:hover {
    color: #828F72 !important;
}

/* Data/meta postów */
.post_meta,
.post_info,
.post_date,
.post_categories a,
.meta-info {
    color: #8A8F8A !important;
    font-size: 12px !important;
}

.post_categories a:hover {
    color: #828F72 !important;
}

/* Badge daty (liczba dnia) — złoty */
.post_date_wrap .post_date_day,
.format_blog_style_classic .post_date_wrap .post_date_day {
    color: #C9A227 !important;
    font-weight: 700 !important;
}

/* Excerpt */
.post_content_inner p,
.post_excerpt {
    color: #8A8F8A !important;
    line-height: 1.65 !important;
}

/* Etykieta "POPULAR" */
.post_featured_label,
.post_label {
    background-color: #828F72 !important;
    color: #FFFFFF !important;
}


/* ----------------------------------------------------------------
   13f. SUBTELNE SEPARATORY SEKCJI
   Szerokie sekcje rozdzielone cienką złotą linią.
   ---------------------------------------------------------------- */

.elementor-top-section + .elementor-top-section {
    border-top: 1px solid rgba(130, 143, 114, 0.08);
}


/* ----------------------------------------------------------------
   13g. TOGGLE ACCORDION (sekcja historii)
   ---------------------------------------------------------------- */

/* Tytuły zakładek — jasny tekst */
.elementor-toggle .elementor-tab-title,
.elementor-toggle .elementor-toggle-title {
    color: #EAEAEA !important;
}

/* Aktywna zakładka — szałwiowy akcent */
.elementor-toggle .elementor-tab-title.elementor-active,
.elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-title {
    color: #828F72 !important;
}

/* Ikony strzałek — szałwiowe */
.elementor-toggle .elementor-toggle-icon svg path {
    fill: #828F72 !important;
}

/* Treść rozwinięta — czytelny jasny tekst */
.elementor-toggle .elementor-tab-content,
.elementor-toggle .elementor-tab-content p {
    color: #C8CCC8 !important;
}


/* ----------------------------------------------------------------
   13h. KARTY PORTFOLIO — nałożka z kategorią i tytułem
   Nadpisuje var(--theme-color-bg_color) z motywu nadrzędnego.
   ---------------------------------------------------------------- */

/* Tło nałożki — dokładne selektory z parent theme */
.sc_portfolio_item .post_featured .post_info,
.post_featured.hover_info .post_info,
.post_featured .post_info {
    background-color: rgba(20, 20, 20, 0.88) !important;
}

/* Kategoria — szałwiowa, uppercase, bez pill-backgroundu */
.post_featured .post_info .post_meta_categories .post_categories a,
.post_featured .post_info .post_categories a {
    color: #828F72 !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

/* Tytuł karty — jasny */
.post_featured .post_info .post_title,
.post_featured .post_info .post_title a {
    color: #EAEAEA !important;
    text-decoration: none !important;
}

.post_featured .post_info .post_title a:hover {
    color: #828F72 !important;
}

/* Ikona strzałki — szałwiowa */
.post_featured .post_info .post_readmore,
.post_featured .post_info .post_readmore a,
.post_featured .post_info a.post_readmore {
    color: #828F72 !important;
    border-color: rgba(130, 143, 114, 0.4) !important;
}


/* ----------------------------------------------------------------
   14. STRONY USŁUG — ukrycie nagłówka strony
   ---------------------------------------------------------------- */

.services_single .services_page_header {
    display: none;
}


/* ----------------------------------------------------------------
   15. STRONA "KONTAKT" — dane kontaktowe przy ikonach
   Widget: trx_sc_icons (elementor-element-d25fce4)
   Docelowy kolor: szałwiowa zieleń #828F72
   ---------------------------------------------------------------- */

.page-id-18638 .elementor-element-d25fce4,
.page-id-18638 .elementor-element-d25fce4 *,
.page-id-18638 .elementor-widget-trx_sc_icons,
.page-id-18638 .elementor-widget-trx_sc_icons * {
    color: #828F72 !important;
}

.page-id-18638 .elementor-widget-trx_sc_icons a:hover,
.page-id-18638 .elementor-widget-trx_sc_icons a:hover * {
    color: #C9A227 !important;
}


/* ----------------------------------------------------------------
   15. STRONA "O NAS" — treść sekcji historycznej
   Tekst w widgecie Text Editor ma inline kolor #808080 ustawiony
   przez edytor WP, który zlewa się z ciemnym tłem sekcji.
   ---------------------------------------------------------------- */

.page-id-18614 .elementor-widget-text-editor *,
.page-id-18614 .elementor-text-editor * {
    color: #C8CCC8 !important;
}

.page-id-18614 .elementor-widget-text-editor strong,
.page-id-18614 .elementor-text-editor strong {
    color: #EAEAEA !important;
}

/* Stopka na stronie O nas — przywrócenie spójnego koloru tekstu adresu
   Reguła .page-id-18614 .elementor-widget-text-editor * (powyżej) jest zbyt
   szeroka i nadpisuje kolor tekstu p/address w stopce na #C8CCC8.
   Wyższy selektor (page-id + elementor-32742) przywraca #8A8F8A jak na innych stronach */
.page-id-18614 .elementor-32742 p,
.page-id-18614 .elementor-32742 address,
.page-id-18614 .footer_wrap p,
.page-id-18614 .footer_wrap address {
    color: #8A8F8A !important;
}


/* ----------------------------------------------------------------
   16. CF7 STYLE 8 — przycisk WYŚLIJ i checkbox
   Problem: CF7 Style 8 renderuje przycisk jako:
     <span class="wpcf7-submit-style">
       <input type="submit">          ← transparentny, kolor z .submit-style-in
       <span class="submit-style-in"> ← faktyczne tło przycisku
     </span>
   Nasze reguły z sekcji 5/9 targetują <input>, który jest
   zawsze transparent — trzeba nadpisać wrapper i inner span.
   ---------------------------------------------------------------- */

/* Wewnętrzny element tła — zmiana czarnego na szałwiowy */
.wpcf7-submit-style .submit-style-in {
    background: linear-gradient(135deg, #828F72 0%, #6F7C63 100%) !important;
    background-color: #828F72 !important;
}

/* Wrapper — spójny wygląd z resztą przycisków BELLS */
.wpcf7-submit-style {
    border-color: #828F72 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(130, 143, 114, 0.25) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

/* Ikonka fontello (papierowy samolot) — biały kolor na szałwiowym tle */
.wpcf7-submit-style .submit-style-in::before {
    color: #FFFFFF !important;
}

/* Hover */
.wpcf7-submit-style:hover {
    border-color: #99A888 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(130, 143, 114, 0.45), 0 0 18px rgba(130, 143, 114, 0.35) !important;
}

.wpcf7-submit-style:hover .submit-style-in {
    background: linear-gradient(135deg, #99A888 0%, #828F72 100%) !important;
    background-color: #99A888 !important;
}

/* ----------------------------------------------------------------
   Checkbox CF7 Style 8 — widoczny border na ::before
   CF7 Style 8 ukrywa natywny checkbox (position:absolute) i renderuje
   wizualny kwadrat przez .wpcf7-list-item-label::before.
   Poniżej gwarantujemy widoczność borderu na obu stronach
   (Kontakt i Usługi).
   ---------------------------------------------------------------- */

.wpcf7-list-item-label::before {
    border: 1px solid #3A3A3A !important;
    border-radius: 3px !important;
}


/* ----------------------------------------------------------------
   18. STRONA POLITYKI PRYWATNOŚCI (page-id-617)
   Sekcje mają background_background:classic z Elementora — nadpisują
   zmienne schematu. Wymuszamy paletę BELLS na całej treści.
   ---------------------------------------------------------------- */

/* Tło sekcji treści */
.page-id-617 .elementor-617 .elementor-section {
    background-color: #1A1A1A !important;
}

/* Tekst główny i listy */
.page-id-617 .elementor-widget-text-editor,
.page-id-617 .elementor-widget-text-editor p,
.page-id-617 .elementor-widget-text-editor li,
.page-id-617 .elementor-widget-text-editor span {
    color: #C8CCC8 !important;
}

/* Nagłówki h5 — numery sekcji */
.page-id-617 .elementor-widget-text-editor h5 {
    color: #EAEAEA !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
}

/* Podtytuły h6 — szałwiowy akcent */
.page-id-617 .elementor-widget-text-editor h6 {
    color: #828F72 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-top: 20px !important;
}

/* Linki w treści */
.page-id-617 .elementor-widget-text-editor a,
.page-id-617 .elementor-widget-text-editor .trx_addons_accent {
    color: #828F72 !important;
    text-decoration: underline;
    text-decoration-color: rgba(130, 143, 114, 0.4);
}

.page-id-617 .elementor-widget-text-editor a:hover {
    color: #C9A227 !important;
    text-decoration-color: rgba(201, 162, 39, 0.5);
}

/* Bold */
.page-id-617 .elementor-widget-text-editor strong,
.page-id-617 .elementor-widget-text-editor b {
    color: #EAEAEA !important;
}


/* ----------------------------------------------------------------
   17. NAGŁÓWEK — ukrycie tytułu strony i strzałki "scroll down"
   Tytuł strony i chevron renderowane przez trx_sc_layouts_title
   w szablonie Header Default — ukryte globalnie na wszystkich stronach.
   ---------------------------------------------------------------- */

.sc_layouts_title_caption {
    display: none !important;
}

.scroll_down,
.trx_addons_scroll_down,
a.scroll_down,
.elementor-element-a3608d8 {
    display: none !important;
}


/* ================================================================
   STRONA 404
   ================================================================ */

/* Ukryj pasek tytułu który motyw wstawia wewnątrz headera na stronie 404 */
.error404 .top_panel_title {
    display: none !important;
}

.bells-404-wrapper {
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #141414;
    padding: 80px 20px;
}

.bells-404-inner {
    text-align: center;
    max-width: 560px;
    width: 100%;
}

.bells-404-clock {
    margin-bottom: 28px;
    display: flex;
    justify-content: center;
    animation: bells404rotate 60s linear infinite;
}

@keyframes bells404rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.bells-404-number {
    font-size: clamp(96px, 20vw, 160px);
    font-weight: 700;
    line-height: 1;
    color: #C9A227;
    letter-spacing: -4px;
    opacity: 0.12;
    margin-bottom: -32px;
    pointer-events: none;
    user-select: none;
}

.bells-404-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: #EAEAEA;
    margin-bottom: 16px;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.bells-404-desc {
    color: #8A8F8A;
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 44px;
}

.bells-404-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.bells-404-btn {
    display: inline-block;
    padding: 13px 34px;
    background: #828F72;
    color: #141414 !important;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.bells-404-btn:hover {
    background: #6B7960;
    color: #141414 !important;
}

.bells-404-btn--outline {
    background: transparent;
    color: #828F72 !important;
    border: 1px solid #828F72;
}

.bells-404-btn--outline:hover {
    background: rgba(130, 143, 114, 0.12);
    color: #828F72 !important;
}


/* ================================================================
   SEKCJA 19 — COOKIE CONSENT BANNER

   Pasek na dole ekranu z informacją o plikach cookies.
   Klasy BEM: .bcb = bells-cookie-banner

   Stan początkowy:  display:none (ustawiony przez PHP w HTML)
   Po showBanner():  bcb--visible → transition slide-up
   Po hideBanner():  bcb--hiding  → transition slide-down + display:none

   Złota linia u góry (::before) — identyczna z linią w stopce.
   Faza 2 (gdy dodasz GA/Ads): rozszerz o modal .bcb-modal
   i toggles .bcb-toggle — JS też jest gotowy (analytics/marketing: null).
================================================================ */

#bells-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #181818;
    box-shadow:
        0 -8px 40px rgba(0, 0, 0, 0.65),
        0 -1px 0 rgba(201, 162, 39, 0.06);
    /* Start: ukryty pod ekranem (inline style z PHP); transform chowa pod ekranem */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Złota linia BELLS — identyczna jak footer::before */
#bells-cookie-banner::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #C9A227 25%,
        #828F72 75%,
        transparent 100%
    );
    opacity: 0.55;
}

/* Baner widoczny */
#bells-cookie-banner.bcb--visible {
    transform: translateY(0);
}

/* Baner znikający */
#bells-cookie-banner.bcb--hiding {
    transform: translateY(100%);
}

.bcb-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* Ikona tarczy — obrys w kolorze akcentu szałwiowego */
.bcb-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(130, 143, 114, 0.35);
    border-radius: 50%;
    color: #828F72;
    background: rgba(130, 143, 114, 0.06);
}

.bcb-icon svg {
    display: block;
}

.bcb-text {
    flex: 1 1 300px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.65;
    color: #C8CCC8;
}

/* Link w tekście — złoty, zgodny z akcentami stopki */
.bcb-text a {
    color: #C9A227;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 39, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.bcb-text a:hover {
    color: #D4AF37;
    border-bottom-color: rgba(212, 175, 55, 0.6);
}

.bcb-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Bazowe style przycisku banera */
.bcb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1;
}

/* Przycisk główny: "Akceptuję" — gradient szałwiowy, biały tekst */
.bcb-btn--primary {
    background: linear-gradient(135deg, #828F72 0%, #6F7C63 100%);
    color: #141414 !important;
    border-color: #828F72;
    box-shadow: 0 2px 10px rgba(130, 143, 114, 0.22);
}

.bcb-btn--primary:hover {
    background: linear-gradient(135deg, #99A888 0%, #828F72 100%);
    border-color: #99A888;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(130, 143, 114, 0.4);
}

/* Przycisk drugorzędny: "Polityka prywatności" — outline */
.bcb-btn--secondary {
    background: transparent;
    color: #8A8F8A !important;
    border-color: #3A3A3A;
}

.bcb-btn--secondary:hover {
    color: #C8CCC8 !important;
    border-color: #828F72;
    background: rgba(130, 143, 114, 0.07);
}

/* Responsywność — na małych ekranach stos pionowy */
@media (max-width: 600px) {
    .bcb-inner {
        padding: 14px 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .bcb-icon {
        display: none;
    }

    /* W kolumnie flex-basis 300px z bazowej reguły stałby się wysokością */
    .bcb-text {
        flex: none;
    }

    .bcb-actions {
        flex-direction: row;
        gap: 8px;
    }

    .bcb-btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 12px 10px;
    }
}


/* ============================================================
   Tytuł sekcji z wyglądem H1, ale tagiem H2 (jeden H1 na stronę — SEO).
   Klasa "bells-title-h1" ustawiona w Elementorze (Zaawansowane → Klasy CSS)
   na widgetach Title: O nas („Ponad pół wieku doświadczenia”) i Kontakt.
   Rozmiary skopiowane z reguł h1 motywu Manufactory.
   ============================================================ */
.bells-title-h1 .sc_item_title {
    font-family: var(--theme-font-h1_font-family);
    font-size: var(--theme-font-h1_font-size);
    font-weight: var(--theme-font-h1_font-weight);
    letter-spacing: var(--theme-font-h1_letter-spacing);
    line-height: 1em;
}
@media (max-width: 1279px) {
    .bells-title-h1 .sc_item_title { font-size: 44px; }
}
@media (max-width: 1023px) {
    .bells-title-h1 .sc_item_title { font-size: 38px; line-height: 42px; }
}
@media (max-width: 767px) {
    .bells-title-h1 .sc_item_title { font-size: 32px; line-height: 34px; }
}
@media (max-width: 479px) {
    .bells-title-h1 .sc_item_title { font-size: 26px; line-height: 31px; }
}