/* Dark theme */
.theme-dark .header-components-search__form,
html.dark .header-components-search__form,
body.dark-theme .header-components-search__form {
    background: rgba(30, 30, 30, 0.9);
}

.theme-dark .header-components-search__input,
html.dark .header-components-search__input,
body.dark-theme .header-components-search__input {
    color: #eee;
}

/* ============================================================
 * Layer 3: Icon cards — 1:1 zibll header-slider-card
 * DOM: .header-slider-card.container > (.zib-widget.padding-10|div)
 *        > .flex.jse.flex-row.gutters-5.flex-col-sm-2
 *          > (.flex1|.relative-h) > [.main-color >] .icon-cover-card.flex.ac.(zib-widget|padding-10)
 * ============================================================ */
.header-slider-card,
.header-components-card {
    position: relative;
    margin-top: -40px;
    z-index: 1;
    /* Sit in normal flow after the slide shell; container is full-bleed */
    width: 100%;
}

/* Ensure .container max-width + horizontal padding match site main (zibll .container) */
.header-slider-card.container,
.header-components-card.container {
    width: 100%;
    max-width: var(--container, var(--mian-max-width, 1200px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.header-slider-card .zib-widget,
.header-components-card .zib-widget {
    margin-bottom: 0;
}

/* Match zibll widget surface so homepage and other page types look identical */
.header-slider-card .icon-cover-card.zib-widget,
.header-components-card .icon-cover-card.zib-widget {
    margin-bottom: 0;
    padding: var(--card-padding, 15px);
    box-shadow: 0 0 10px var(--main-shadow, var(--shadow-sm, rgba(116, 116, 116, 0.08)));
    border-radius: var(--main-radius, var(--radius, 8px));
    background-color: var(--main-bg-color, var(--surface-1, #fff));
    height: 100%;
    box-sizing: border-box;
}

/* zibll filter-blur glass on card surfaces + search form */
.filter-blur .header-slider-search .line-form,
.filter-blur .header-components-search .line-form,
.filter-blur .header-slider-card .zib-widget,
.filter-blur .header-components-card .zib-widget {
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px);
}

.filter-blur .header-slider-card .zib-widget,
.filter-blur .header-components-card .zib-widget {
    background: var(--blur-bg, rgba(255, 255, 255, 0.75));
}

.theme-dark .filter-blur .header-slider-card .zib-widget,
html.dark .filter-blur .header-slider-card .zib-widget,
body.dark-theme .filter-blur .header-slider-card .zib-widget,
.theme-dark .filter-blur .header-components-card .zib-widget,
html.dark .filter-blur .header-components-card .zib-widget,
body.dark-theme .filter-blur .header-components-card .zib-widget {
    background: var(--blur-bg, rgba(30, 30, 30, 0.75));
}

/* Device-split blur (AKSRT extension of zibll filter-blur) */
@media (min-width: 768px) {
  .has-blur-pc .header-slider-card .zib-widget,
  .has-blur-pc .header-components-card .zib-widget {
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px);
    background: var(--blur-bg, rgba(255, 255, 255, 0.75));
  }
  .has-blur-pc .header-components-search .line-form,
  .has-blur-pc .header-slider-search .line-form {
    background: rgba(255, 255, 255, 0.75);
  }
  .theme-dark .has-blur-pc .header-slider-card .zib-widget,
  html.dark .has-blur-pc .header-slider-card .zib-widget,
  .theme-dark .has-blur-pc .header-components-card .zib-widget,
  html.dark .has-blur-pc .header-components-card .zib-widget {
    background: var(--blur-bg, rgba(30, 30, 30, 0.75));
  }
}
@media (max-width: 767px) {
  .has-blur-mobile .header-slider-card .zib-widget,
  .has-blur-mobile .header-components-card .zib-widget {
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px);
    background: var(--blur-bg, rgba(255, 255, 255, 0.75));
  }
  .has-blur-mobile .header-components-search .line-form,
  .has-blur-mobile .header-slider-search .line-form {
    background: rgba(255, 255, 255, 0.75);
  }
  .theme-dark .has-blur-mobile .header-slider-card .zib-widget,
  html.dark .has-blur-mobile .header-slider-card .zib-widget,
  .theme-dark .has-blur-mobile .header-components-card .zib-widget,
  html.dark .has-blur-mobile .header-components-card .zib-widget {
    background: var(--blur-bg, rgba(30, 30, 30, 0.75));
  }

  .header-slider-card .icon-cover-card.zib-widget,
  .header-components-card .icon-cover-card.zib-widget {
    padding: 10px;
  }
  .header-slider-card .icon-cover-card.padding-10,
  .header-components-card .icon-cover-card.padding-10 {
    padding: 2px;
  }
  .header-slider-card,
  .header-components-card {
    margin-top: -35px;
  }
}

/* icon-cover-card itself is a flex row — do NOT re-skin as a bordered box here.
 * Surface comes from .zib-widget / .padding-10; icon badge from .badg.cir + c-*/jb-*. */
.header-slider-card .icon-cover-card,
.header-components-card .icon-cover-card {
    display: flex;
    align-items: center;
    gap: 0;
    /* padding comes from .zib-widget or .padding-10 class on the same node */
}

.header-slider-card a.main-color,
.header-components-card a.main-color {
    color: inherit;
    text-decoration: none;
    display: block;
}

.header-slider-card a.main-color:hover,
.header-components-card a.main-color:hover {
    color: inherit;
    text-decoration: none;
}

/* Let .badg.cir + color modifiers drive icon look; only size/image tweaks here */
.header-slider-card .icon-cover-icon.badg.cir,
.header-components-card .icon-cover-icon.badg.cir {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.header-slider-card .icon-cover-icon img,
.header-components-card .icon-cover-icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.header-slider-card .icon-cover-desc,
.header-components-card .icon-cover-desc {
    min-width: 0;
    overflow: hidden;
}

.header-slider-card .icon-cover-desc .font-bold,
.header-components-card .icon-cover-desc .font-bold {
    font-weight: bold;
}