/* =========================================================
   ELEMENT-SHOP THEME V4
   Shoptet Classic + custom ES content blocks
   ========================================================= */

/* ---------- ZÁKLAD ---------- */
:root {
  --es-theme-bg: #ffffff;
  --es-theme-bg-soft: #f5f7f8;
  --es-theme-card: #ffffff;
  --es-theme-card-2: #fbfcfd;
  --es-theme-text: #1d2b36;
  --es-theme-text-soft: #697987;
  --es-theme-border: #d9e2e8;
  --es-theme-accent: #008080;
  --es-theme-accent-2: #0a6d6d;
  --es-theme-shadow: 0 10px 24px rgba(0,0,0,0.08);
  --es-theme-overlay: rgba(15, 20, 25, 0.72);
}

/* ---------- DARK ---------- */
html[data-es-theme="dark"] {
  --es-theme-bg: #0f1419;
  --es-theme-bg-soft: #172029;
  --es-theme-card: #1a232c;
  --es-theme-card-2: #202b35;
  --es-theme-text: #e6edf3;
  --es-theme-text-soft: #aab8c4;
  --es-theme-border: #31404d;
  --es-theme-accent: #19a3a3;
  --es-theme-accent-2: #27c1c1;
  --es-theme-shadow: 0 14px 30px rgba(0,0,0,0.34);
  --es-theme-overlay: rgba(0, 0, 0, 0.82);
}

/* ---------- TRANSITIONS ---------- */
html.es-theme-ready body,
html.es-theme-ready body * {
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

/* =========================================================
   SHOPTET UI
   ========================================================= */

html[data-es-theme="dark"] body,
html[data-es-theme="dark"] #wrapper,
html[data-es-theme="dark"] #content-wrapper,
html[data-es-theme="dark"] #content,
html[data-es-theme="dark"] .overall-wrapper,
html[data-es-theme="dark"] .content-wrapper {
  background: var(--es-theme-bg);
  color: var(--es-theme-text);
}

html[data-es-theme="dark"] p,
html[data-es-theme="dark"] li,
html[data-es-theme="dark"] td,
html[data-es-theme="dark"] th,
html[data-es-theme="dark"] label,
html[data-es-theme="dark"] h1,
html[data-es-theme="dark"] h2,
html[data-es-theme="dark"] h3,
html[data-es-theme="dark"] h4,
html[data-es-theme="dark"] h5,
html[data-es-theme="dark"] h6 {
  color: var(--es-theme-text);
}

html[data-es-theme="dark"] a {
  color: var(--es-theme-accent);
}

html[data-es-theme="dark"] a:hover {
  color: var(--es-theme-accent-2);
}

/* ---------- HEADER / NAV ---------- */
html[data-es-theme="dark"] #header,
html[data-es-theme="dark"] .header-top,
html[data-es-theme="dark"] .header-bottom,
html[data-es-theme="dark"] .navigation-wrapper,
html[data-es-theme="dark"] .navigation-in,
html[data-es-theme="dark"] .top-navigation-bar,
html[data-es-theme="dark"] .top-navigation-tools,
html[data-es-theme="dark"] .top-navigation-menu,
html[data-es-theme="dark"] .site-name {
  background: var(--es-theme-card);
  color: var(--es-theme-text);
  border-color: var(--es-theme-border);
}

html[data-es-theme="dark"] .top-navigation-menu a,
html[data-es-theme="dark"] .top-navigation-tools a,
html[data-es-theme="dark"] .menu-level-1 > li > a,
html[data-es-theme="dark"] .menu-level-2 a,
html[data-es-theme="dark"] .menu-level-3 a {
  color: var(--es-theme-text);
}

/* ---------- DROPDOWN / MEGA MENU ---------- */
html[data-es-theme="dark"] .dropdown,
html[data-es-theme="dark"] .dropdown-menu,
html[data-es-theme="dark"] .menu-level-2,
html[data-es-theme="dark"] .menu-level-3,
html[data-es-theme="dark"] .navigation-window,
html[data-es-theme="dark"] .currency-menu,
html[data-es-theme="dark"] .language-menu,
html[data-es-theme="dark"] .menu-helper {
  background: var(--es-theme-card);
  color: var(--es-theme-text);
  border-color: var(--es-theme-border);
  box-shadow: var(--es-theme-shadow);
}

/* ---------- KARTY / PRODUKTY / BOXY ---------- */
html[data-es-theme="dark"] .box,
html[data-es-theme="dark"] .box-bg-default,
html[data-es-theme="dark"] .sidebar,
html[data-es-theme="dark"] .sidebar-box,
html[data-es-theme="dark"] .content-inner,
html[data-es-theme="dark"] .category-header,
html[data-es-theme="dark"] .product,
html[data-es-theme="dark"] .product-wrap,
html[data-es-theme="dark"] .p,
html[data-es-theme="dark"] .p-in,
html[data-es-theme="dark"] .p-bottom,
html[data-es-theme="dark"] .p-tools,
html[data-es-theme="dark"] .tab-content,
html[data-es-theme="dark"] .detail-description,
html[data-es-theme="dark"] .detail-parameters,
html[data-es-theme="dark"] .cart-inner,
html[data-es-theme="dark"] .checkout-box,
html[data-es-theme="dark"] .news-item,
html[data-es-theme="dark"] .blog-item,
html[data-es-theme="dark"] .banner,
html[data-es-theme="dark"] .benefitBanner__item,
html[data-es-theme="dark"] .flag,
html[data-es-theme="dark"] .flags {
  background: var(--es-theme-card);
  color: var(--es-theme-text);
  border-color: var(--es-theme-border);
  box-shadow: none;
}

/* ---------- FORMULÁŘE ---------- */
html[data-es-theme="dark"] input,
html[data-es-theme="dark"] textarea,
html[data-es-theme="dark"] select,
html[data-es-theme="dark"] .input,
html[data-es-theme="dark"] .search-input {
  background: var(--es-theme-bg-soft);
  color: var(--es-theme-text);
  border: 1px solid var(--es-theme-border);
}

html[data-es-theme="dark"] input::placeholder,
html[data-es-theme="dark"] textarea::placeholder {
  color: var(--es-theme-text-soft);
}

/* ---------- TLAČÍTKA ---------- */
html[data-es-theme="dark"] .btn,
html[data-es-theme="dark"] .button,
html[data-es-theme="dark"] button,
html[data-es-theme="dark"] input[type="submit"],
html[data-es-theme="dark"] input[type="button"] {
  border-color: var(--es-theme-border);
}

html[data-es-theme="dark"] .btn.btn-primary,
html[data-es-theme="dark"] .button.button-action,
html[data-es-theme="dark"] .add-to-cart-button,
html[data-es-theme="dark"] .buy-button,
html[data-es-theme="dark"] .btn.cart-button {
  background: var(--es-theme-accent);
  border-color: var(--es-theme-accent);
  color: #ffffff;
}

html[data-es-theme="dark"] .btn.btn-primary:hover,
html[data-es-theme="dark"] .button.button-action:hover,
html[data-es-theme="dark"] .add-to-cart-button:hover,
html[data-es-theme="dark"] .buy-button:hover,
html[data-es-theme="dark"] .btn.cart-button:hover {
  background: var(--es-theme-accent-2);
  border-color: var(--es-theme-accent-2);
}

/* ---------- TABULKY ---------- */
html[data-es-theme="dark"] table,
html[data-es-theme="dark"] tr,
html[data-es-theme="dark"] td,
html[data-es-theme="dark"] th {
  border-color: var(--es-theme-border);
}

html[data-es-theme="dark"] th {
  background: var(--es-theme-bg-soft);
}

/* ---------- FOOTER ---------- */
html[data-es-theme="dark"] #footer,
html[data-es-theme="dark"] .footer-rows,
html[data-es-theme="dark"] .footer-bottom,
html[data-es-theme="dark"] .footer-links,
html[data-es-theme="dark"] .copyright {
  background: #0d141a;
  color: var(--es-theme-text);
  border-color: var(--es-theme-border);
}

/* =========================================================
   ELEMENT-SHOP CUSTOM HTML BLOCKS
   záměrně cíleno na .es-* kvůli vašim šablonám
   ========================================================= */

/* wrappers */
html[data-es-theme="dark"] .es-long-content,
html[data-es-theme="dark"] .es-short-content,
html[data-es-theme="dark"] .es-wrap,
html[data-es-theme="dark"] .es-container {
  background: transparent !important;
  color: var(--es-theme-text) !important;
}

/* standard boxy */
html[data-es-theme="dark"] .es-block,
html[data-es-theme="dark"] .es-box,
html[data-es-theme="dark"] .es-card,
html[data-es-theme="dark"] .es-panel,
html[data-es-theme="dark"] .es-note,
html[data-es-theme="dark"] .es-highlight,
html[data-es-theme="dark"] .es-callout,
html[data-es-theme="dark"] .es-info-box,
html[data-es-theme="dark"] .es-warning-box,
html[data-es-theme="dark"] .es-safety-box,
html[data-es-theme="dark"] .es-tech-box {
  background: var(--es-theme-card) !important;
  color: var(--es-theme-text) !important;
  border-color: var(--es-theme-border) !important;
  box-shadow: none !important;
}

/* nadpisy a texty */
html[data-es-theme="dark"] .es-h,
html[data-es-theme="dark"] .es-h1,
html[data-es-theme="dark"] .es-h2,
html[data-es-theme="dark"] .es-h3,
html[data-es-theme="dark"] .es-h4,
html[data-es-theme="dark"] .es-p,
html[data-es-theme="dark"] .es-text,
html[data-es-theme="dark"] .es-lead,
html[data-es-theme="dark"] .es-muted,
html[data-es-theme="dark"] .es-li,
html[data-es-theme="dark"] .es-ul,
html[data-es-theme="dark"] .es-ol {
  color: var(--es-theme-text) !important;
}

html[data-es-theme="dark"] .es-muted,
html[data-es-theme="dark"] .es-lead-soft,
html[data-es-theme="dark"] .es-subtext {
  color: var(--es-theme-text-soft) !important;
}

/* odkazy uvnitř custom obsahu */
html[data-es-theme="dark"] .es-long-content a,
html[data-es-theme="dark"] .es-short-content a {
  color: var(--es-theme-accent) !important;
}

/* tabulky vašich popisů */
html[data-es-theme="dark"] .es-table,
html[data-es-theme="dark"] .es-table table,
html[data-es-theme="dark"] .es-long-content table,
html[data-es-theme="dark"] .es-short-content table {
  background: var(--es-theme-card) !important;
  color: var(--es-theme-text) !important;
  border-color: var(--es-theme-border) !important;
}

html[data-es-theme="dark"] .es-table th,
html[data-es-theme="dark"] .es-long-content th,
html[data-es-theme="dark"] .es-short-content th {
  background: var(--es-theme-bg-soft) !important;
  color: var(--es-theme-text) !important;
}

html[data-es-theme="dark"] .es-table td,
html[data-es-theme="dark"] .es-table th,
html[data-es-theme="dark"] .es-long-content td,
html[data-es-theme="dark"] .es-long-content th,
html[data-es-theme="dark"] .es-short-content td,
html[data-es-theme="dark"] .es-short-content th {
  border-color: var(--es-theme-border) !important;
  color: var(--es-theme-text) !important;
}

/* seznamy */
html[data-es-theme="dark"] .es-ul li,
html[data-es-theme="dark"] .es-ol li,
html[data-es-theme="dark"] .es-long-content ul li,
html[data-es-theme="dark"] .es-short-content ul li {
  color: var(--es-theme-text) !important;
}

/* obrázky necháváme přirozeně */
html[data-es-theme="dark"] .es-long-content img,
html[data-es-theme="dark"] .es-short-content img {
  background: transparent !important;
}

/* =========================================================
   FAQ FLIP CARDS
   podporuje vaše es-flip-card / es-flip-inner patterny
   ========================================================= */

html[data-es-theme="dark"] .es-faq,
html[data-es-theme="dark"] .es-faq-grid,
html[data-es-theme="dark"] .es-faq-item {
  background: transparent !important;
}

html[data-es-theme="dark"] .es-flip-card,
html[data-es-theme="dark"] .es-faq-card,
html[data-es-theme="dark"] .faq-card {
  background: transparent !important;
}

html[data-es-theme="dark"] .es-flip-inner,
html[data-es-theme="dark"] .es-faq-front,
html[data-es-theme="dark"] .es-faq-back,
html[data-es-theme="dark"] .faq-front,
html[data-es-theme="dark"] .faq-back,
html[data-es-theme="dark"] .es-faq-question,
html[data-es-theme="dark"] .es-faq-answer {
  background: linear-gradient(180deg, #1b2530 0%, #162029 100%) !important;
  color: var(--es-theme-text) !important;
  border-color: #28404a !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}

html[data-es-theme="dark"] .es-faq-front *,
html[data-es-theme="dark"] .es-faq-back *,
html[data-es-theme="dark"] .faq-front *,
html[data-es-theme="dark"] .faq-back * {
  color: var(--es-theme-text) !important;
}

/* zvýraznění akcentu na hraně */
html[data-es-theme="dark"] .es-faq-front,
html[data-es-theme="dark"] .faq-front {
  box-shadow:
    inset 4px 0 0 var(--es-theme-accent),
    0 10px 24px rgba(0,0,0,.22) !important;
}

html[data-es-theme="dark"] .es-faq-back,
html[data-es-theme="dark"] .faq-back {
  box-shadow:
    inset 4px 0 0 var(--es-theme-accent-2),
    0 10px 24px rgba(0,0,0,.22) !important;
}

/* =========================================================
   SAFETY / REACH / CLP / ADR BOXY
   ========================================================= */

html[data-es-theme="dark"] .es-reach-box,
html[data-es-theme="dark"] .es-clp-box,
html[data-es-theme="dark"] .es-adr-box,
html[data-es-theme="dark"] .es-b2b-safety-box,
html[data-es-theme="dark"] .es-safety-extended {
  background: #1a232c !important;
  color: var(--es-theme-text) !important;
  border: 1px solid #35505f !important;
  box-shadow: none !important;
}

html[data-es-theme="dark"] .es-reach-box *,
html[data-es-theme="dark"] .es-clp-box *,
html[data-es-theme="dark"] .es-adr-box *,
html[data-es-theme="dark"] .es-b2b-safety-box *,
html[data-es-theme="dark"] .es-safety-extended * {
  color: var(--es-theme-text) !important;
}

/* malé badge / štítky */
html[data-es-theme="dark"] .es-badge,
html[data-es-theme="dark"] .es-pill,
html[data-es-theme="dark"] .es-tag {
  background: #20303a !important;
  color: var(--es-theme-text) !important;
  border-color: #3c5562 !important;
}

/* =========================================================
   THEME SWITCHER UI
   ========================================================= */

.es-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding: 4px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
}

.es-theme-switcher button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #17323a;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.es-theme-switcher button:hover {
  background: rgba(0,128,128,0.10);
}

.es-theme-switcher button.is-active {
  background: #008080;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0,128,128,0.25);
}

html[data-es-theme="dark"] .es-theme-switcher {
  background: rgba(22,30,38,0.94);
  border-color: var(--es-theme-border);
  box-shadow: var(--es-theme-shadow);
}

html[data-es-theme="dark"] .es-theme-switcher button {
  color: var(--es-theme-text);
}

html[data-es-theme="dark"] .es-theme-switcher button:hover {
  background: rgba(25,163,163,0.14);
}

html[data-es-theme="dark"] .es-theme-switcher button.is-active {
  background: var(--es-theme-accent);
  color: #ffffff;
}

@media (max-width: 991px) {
  .es-theme-switcher {
    margin-left: 10px;
    transform: scale(.95);
    transform-origin: left center;
  }

  .es-theme-switcher button {
    padding: 7px 10px;
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .es-theme-switcher {
    margin-top: 8px;
    margin-left: 0;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}