/* Brenta dodaci — tamna tema, alati u zaglavlju, društvene mreže */

/* ---------- alati u zaglavlju (jezik + tema) ---------- */
.bx-tools { display: flex; align-items: center; gap: 10px; margin-left: 22px; }
.bx-tools .bx-langs { display: flex; align-items: center; gap: 4px; }
.bx-tools .bx-lang {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1; text-decoration: none;
  color: #0f141e; opacity: .55; transition: opacity .15s, background .15s;
}
.bx-tools .bx-lang img { width: 18px; height: auto; border-radius: 2px; display: block; }
.bx-tools .bx-lang:hover { opacity: 1; background: rgba(0,119,192,.08); }
.bx-tools .bx-lang.is-current { opacity: 1; }
.bx-theme {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(15,20,30,.12); background: transparent;
  display: inline-grid; place-items: center; cursor: pointer; color: #0f141e; padding: 0; transition: background .15s, border-color .15s;
}
.bx-theme:hover { background: rgba(0,119,192,.08); border-color: rgba(0,119,192,.35); }
.bx-theme:focus-visible { outline: 2px solid #0077c0; outline-offset: 2px; }
.bx-theme svg { width: 18px; height: 18px; }
.bx-theme .bx-sun { display: none; }
html.bx-dark .bx-theme .bx-sun { display: block; }
html.bx-dark .bx-theme .bx-moon { display: none; }
.header-upper .right-column, .sticky-header .right-column { display: flex; align-items: center; }
@media (max-width: 991px) {
  .bx-tools { margin-left: 0; margin-right: 14px; gap: 6px; }
  .bx-tools .bx-lang span { display: none; }
  .bx-tools .bx-lang { padding: 5px 4px; }
}

/* ---------- društvene mreže ---------- */
.bx-social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 0; list-style: none; }
.bx-social a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff; transition: background .15s, transform .15s;
}
.bx-social a:hover { background: #fff; color: #005385; transform: translateY(-2px); }
.bx-social svg { width: 17px; height: 17px; fill: currentColor; }
.mobile-menu .bx-social { padding: 0 25px 25px; }

/* ---------- eko oznaka (reciklažne boce) ---------- */
.bx-eco { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.bx-eco svg { width: 22px; height: 22px; fill: #7fd36a; }

/* ---------- tamna tema ---------- */
html.bx-dark { color-scheme: dark; }
html.bx-dark body, html.bx-dark .boxed_wrapper, html.bx-dark .page-wrapper { background-color: #0d131b !important; color: #b6c0cb; }
html.bx-dark .header-upper .inner-container,
html.bx-dark .sticky-header,
html.bx-dark .sticky-header .inner-container { background-color: #111a24 !important; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35) !important; }
html.bx-dark .main-menu .navigation > li > a { color: #e6ebf0 !important; }
html.bx-dark .main-menu .navigation > li.current > a, html.bx-dark .main-menu .navigation > li > a:hover { color: #4fb3f0 !important; }
html.bx-dark .main-menu .navigation > li > ul, html.bx-dark .main-menu .navigation > li > ul > li > ul { background: #111a24 !important; }
html.bx-dark .main-menu .navigation li ul li a { color: #d4dbe2 !important; }
html.bx-dark .mobile-nav-toggler img { filter: invert(1) brightness(1.6); }
html.bx-dark .bx-tools .bx-lang, html.bx-dark .bx-theme { color: #e6ebf0; }
html.bx-dark .bx-theme { border-color: rgba(255,255,255,.18); }
html.bx-dark .bx-tools .bx-lang:hover, html.bx-dark .bx-theme:hover { background: rgba(79,179,240,.14); }

html.bx-dark .banner-section,
html.bx-dark .page-title,
html.bx-dark section[class*="bg_light"], html.bx-dark .light_bg, html.bx-dark .bg_light { background-color: #0f1720 !important; }
html.bx-dark .bg_white, html.bx-dark .blockquote, html.bx-dark .wrapper-box,
html.bx-dark .woocommerce div.product .woocommerce-tabs .panel,
html.bx-dark .panel.entry-content { background-color: #151f2a !important; }
html.bx-dark .b_shadow_1, html.bx-dark .bg_white { box-shadow: 0 10px 30px rgba(0,0,0,.35) !important; }

html.bx-dark :is(h1, h2, h3, h4, h5, h6):not(.color_white):not([class*="theme_color"]):not(.fs_15) { color: #eef2f6; }
html.bx-dark :is(h1, h2, h3, h4, h6) a:not(.theme-btn) { color: inherit; }
html.bx-dark :is(p, li, .text, dd, dt, label, td, th):not(.color_white):not([class*="color_white"]) { color: #aeb8c3; }
html.bx-dark .theme_bg :is(p, li, .text, h1, h2, h3, h4, h5, h6),
html.bx-dark .who-we-are :is(p, li, .text, h1, h2, h3, h4, h5, h6),
html.bx-dark .main-footer :is(p, li, .text, h1, h2, h3, h4, h5, h6, a) { color: inherit; }
html.bx-dark .bg_white :is(h1,h2,h3,h4,h5,h6) { color: #eef2f6; }
html.bx-dark .bg_white :is(p, .text) { color: #aeb8c3; }
html.bx-dark .blockquote :is(p, strong, h3, h4, span) { color: #d4dbe2; }

html.bx-dark input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html.bx-dark textarea, html.bx-dark select, html.bx-dark .nice-select {
  background-color: #0f1720 !important; color: #e6ebf0 !important; border-color: #2a3644 !important;
}
html.bx-dark ::placeholder { color: #6f7c8a !important; }

/* sjene/oblici iz teme koji su svijetli na tamnom */
html.bx-dark .banner-section .pattern-layer, html.bx-dark [class*="shape-"] { opacity: .25; }

/* konfigurator boca u tamnoj temi */
html.bx-dark .bcfg {
  --bcfg-ink: #eef2f6; --bcfg-muted: #97a3b0; --bcfg-line: #263240; --bcfg-stage: #1a2531;
  --bcfg-surface: #111a24; --bcfg-soft: #151f2a;
}
html.bx-dark .bcfg .bcfg-tier.is-active { background: #eef2f6; color: #0d131b; border-color: #eef2f6; }
html.bx-dark .bcfg .bcfg-field input, html.bx-dark .bcfg .bcfg-field select, html.bx-dark .bcfg .bcfg-field textarea { background: #0f1720; border-color: #2a3644; }
html.bx-dark .bcfg .bcfg-notice { background: #3a2f12; color: #f3d98b; }

/* galerija / slike — lagano zatamnjenje oštrog bijelog */
html.bx-dark img[src$=".png"]:not(.bx-keep) { filter: none; }

/* glatki prijelaz pri promjeni teme */
html.bx-anim, html.bx-anim * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }

@media (prefers-reduced-motion: reduce) { html.bx-anim, html.bx-anim * { transition: none !important; } }