/**
 * Design Cart Utilities — Front styles
 *
 * @author    Paweł Nosko
 * @company   Design Cart
 * @website   https://www.designcart.pl
 */

/* ═══════════════════════════════════════════
 *  TAB
 * ═══════════════════════════════════════════ */

.dc-ut-tab,
.dc-ut-tab *,
.dc-ut-tab *::before,
.dc-ut-tab *::after {
  box-sizing: border-box !important;
}

.dc-ut-tab {
  margin: 1.5rem 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
}

.dc-ut-tab-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  border-bottom: 1px solid var(--dc-ut-tab-menu-border, #d1d5db) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  background: transparent !important;
}

.dc-ut-tab-btn {
  background: var(--dc-ut-tab-menu-bg, #f3f4f6) !important;
  border: 1px solid var(--dc-ut-tab-menu-border, #d1d5db) !important;
  border-bottom: none !important;
  border-radius: var(--dc-ut-tab-radius, 12px) var(--dc-ut-tab-radius, 12px) 0 0 !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  font-size: var(--dc-ut-tab-menu-font-size, 15px) !important;
  font-weight: var(--dc-ut-tab-menu-font-weight, 600) !important;
  color: var(--dc-ut-tab-menu-color, #111827) !important;
  text-align: var(--dc-ut-tab-menu-align, left) !important;
  text-transform: var(--dc-ut-tab-menu-transform, none) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  float: none !important;
  position: relative !important;
  line-height: 1.3 !important;
}

.dc-ut-tab-btn.is-active {
  background: var(--dc-ut-tab-menu-active-bg, #ffffff) !important;
  border-bottom-color: var(--dc-ut-tab-menu-active-bg, #ffffff) !important;
  position: relative !important;
}

.dc-ut-tab-btn.is-active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: var(--dc-ut-tab-menu-active-bg, #ffffff) !important;
  display: block !important;
}

.dc-ut-tab-panel {
  background: var(--dc-ut-tab-body-bg, #ffffff) !important;
  border: 1px solid var(--dc-ut-tab-body-border, #e5e7eb) !important;
  border-top: none !important;
  border-radius: 0 0 var(--dc-ut-tab-radius, 12px) var(--dc-ut-tab-radius, 12px) !important;
  padding: 20px !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  float: none !important;
  position: relative !important;
  font-size: var(--dc-ut-tab-body-font-size, 15px) !important;
  font-weight: var(--dc-ut-tab-body-font-weight, 400) !important;
  color: var(--dc-ut-tab-body-color, #374151) !important;
  text-align: var(--dc-ut-tab-body-align, left) !important;
  text-transform: var(--dc-ut-tab-body-transform, none) !important;
  line-height: 1.55 !important;
}

.dc-ut-tab-panel[hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════
 *  ACCORDION
 *  Struktura: item → header + body → inner → panel
 *  Padding/border TYLKO na .dc-ut-accordion-body-panel
 * ═══════════════════════════════════════════ */

.dc-ut-accordion,
.dc-ut-accordion *,
.dc-ut-accordion *::before,
.dc-ut-accordion *::after {
  box-sizing: border-box !important;
}

.dc-ut-accordion {
  margin: 1.5rem 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
}

.dc-ut-accordion-item {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  float: none !important;
  transform: none !important;
  background: transparent !important;
}

.dc-ut-accordion-item:last-child {
  margin-bottom: 0 !important;
}

.dc-ut-accordion-header {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid var(--dc-ut-acc-header-border, #d1d5db) !important;
  border-bottom: 1px solid var(--dc-ut-acc-header-border, #d1d5db) !important;
  background: var(--dc-ut-acc-header-bg, #f8fafc) !important;
  border-radius: var(--dc-ut-acc-radius, 12px) !important;
  min-height: 52px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  gap: 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  float: none !important;
  transform: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-align: var(--dc-ut-acc-header-align, left) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  color: var(--dc-ut-acc-header-color, #111827) !important;
  transition: border-radius 0.38s ease,
    border-color 0.38s ease !important;
}

.dc-ut-accordion-header,
.dc-ut-accordion-header:hover,
.dc-ut-accordion-header:focus,
.dc-ut-accordion-header:active {
  text-decoration: none !important;
}

.dc-ut-accordion-item.is-open .dc-ut-accordion-header {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-color: transparent !important;
}

/* .rich-text h2 z motywu = 2rem — trzeba wyższej specyficzności + !important */
.dc-ut-accordion-title,
.dc-ut-accordion-header .dc-ut-accordion-title,
.dc-ut-accordion-header h1.dc-ut-accordion-title,
.dc-ut-accordion-header h2.dc-ut-accordion-title,
.dc-ut-accordion-header h3.dc-ut-accordion-title,
.dc-ut-accordion-header h4.dc-ut-accordion-title,
.dc-ut-accordion-header h5.dc-ut-accordion-title,
.dc-ut-accordion-header h6.dc-ut-accordion-title,
.rich-text .dc-ut-accordion-title,
.rich-text h1.dc-ut-accordion-title,
.rich-text h2.dc-ut-accordion-title,
.rich-text h3.dc-ut-accordion-title,
.rich-text h4.dc-ut-accordion-title,
.rich-text h5.dc-ut-accordion-title,
.rich-text h6.dc-ut-accordion-title,
.rich-text .dc-ut-accordion-header h1.dc-ut-accordion-title,
.rich-text .dc-ut-accordion-header h2.dc-ut-accordion-title,
.rich-text .dc-ut-accordion-header h3.dc-ut-accordion-title,
.rich-text .dc-ut-accordion-header h4.dc-ut-accordion-title,
.rich-text .dc-ut-accordion-header h5.dc-ut-accordion-title,
.rich-text .dc-ut-accordion-header h6.dc-ut-accordion-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: static !important;
  float: none !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: var(--dc-ut-acc-header-font-size, 16px) !important;
  font-weight: var(--dc-ut-acc-header-font-weight, 600) !important;
  color: var(--dc-ut-acc-header-color, #111827) !important;
  text-align: var(--dc-ut-acc-header-align, left) !important;
  text-transform: var(--dc-ut-acc-header-transform, none) !important;
}

.dc-ut-accordion-arrow {
  display: block !important;
  flex: 0 0 auto !important;
  width: 12px !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #6b7280 !important;
  position: static !important;
  float: none !important;
  transition: transform 0.38s ease !important;
}

.dc-ut-accordion-item.is-open .dc-ut-accordion-arrow {
  transform: rotate(180deg) !important;
}

/*
 * Płynne otwieranie/zamykanie: grid 0fr → 1fr + fade-in treści.
 * Warstwa body/inner: ZERO paddingu i borderu.
 * Panel: dopiero tu padding i wygląd.
 */
.dc-ut-accordion-body {
  display: grid !important;
  grid-template-rows: 0fr !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  float: none !important;
  overflow: hidden !important;
  min-height: 0 !important;
  transition: grid-template-rows 0.38s ease !important;
}

.dc-ut-accordion-item.is-open .dc-ut-accordion-body {
  grid-template-rows: 1fr !important;
}

.dc-ut-accordion-body-inner {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  float: none !important;
}

.dc-ut-accordion-body-panel {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--dc-ut-acc-body-border, #e5e7eb) !important;
  border-top: 0 !important;
  background: var(--dc-ut-acc-body-bg, #ffffff) !important;
  border-bottom-left-radius: var(--dc-ut-acc-radius, 12px) !important;
  border-bottom-right-radius: var(--dc-ut-acc-radius, 12px) !important;
  overflow: visible !important;
  position: relative !important;
  float: none !important;
  opacity: 0 !important;
  transition: opacity 0.32s ease !important;
  font-size: var(--dc-ut-acc-body-font-size, 15px) !important;
  font-weight: var(--dc-ut-acc-body-font-weight, 400) !important;
  color: var(--dc-ut-acc-body-color, #4b5563) !important;
  text-align: var(--dc-ut-acc-body-align, left) !important;
  text-transform: var(--dc-ut-acc-body-transform, none) !important;
  line-height: 1.55 !important;
}

.dc-ut-accordion-item.is-open .dc-ut-accordion-body-panel {
  opacity: 1 !important;
}

.dc-ut-accordion-body-panel > *:first-child {
  margin-top: 0 !important;
}

.dc-ut-accordion-body-panel > *:last-child {
  margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════
 *  FEATUREDS
 * ═══════════════════════════════════════════ */

.dc-ut-featureds,
.dc-ut-featureds *,
.dc-ut-featureds *::before,
.dc-ut-featureds *::after {
  box-sizing: border-box !important;
}

.dc-ut-featureds {
  margin: 1.5rem 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(var(--dc-ut-feat-cols, 4), minmax(0, 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
}

@media (max-width: 992px) {
  .dc-ut-featureds {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 576px) {
  .dc-ut-featureds {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.dc-ut-featured-item {
  background: var(--dc-ut-feat-box-bg, #ffffff) !important;
  border: 1px solid var(--dc-ut-feat-box-border, #e5e7eb) !important;
  border-radius: var(--dc-ut-feat-box-radius, 8px) !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.75rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  float: none !important;
  margin: 0 !important;
}

/* icon="top" — ikona nad contentem */
.dc-ut-featured-item--icon-top {
  flex-direction: column !important;
}

/* icon="left" — ikona po lewej, content po prawej */
.dc-ut-featured-item--icon-left {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

/* icon="right" — content po lewej, ikona po prawej */
.dc-ut-featured-item--icon-right {
  flex-direction: row-reverse !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

.dc-ut-featured-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.dc-ut-featured-icon-wrap {
  display: flex !important;
  flex-shrink: 0 !important;
  --dc-ut-feat-icon-width: 48px;
}

.dc-ut-featured-icon-wrap--top {
  width: 100% !important;
  justify-content: flex-start !important;
}

.dc-ut-featured-icon-wrap--left,
.dc-ut-featured-icon-wrap--right {
  justify-content: flex-start !important;
}

.dc-ut-featured-icon-wrap--top.dc-ut-align-center,
.dc-ut-featured-icon-wrap--left.dc-ut-align-center,
.dc-ut-featured-icon-wrap--right.dc-ut-align-center {
  justify-content: center !important;
}

.dc-ut-featured-icon-wrap--top.dc-ut-align-right,
.dc-ut-featured-icon-wrap--left.dc-ut-align-right,
.dc-ut-featured-icon-wrap--right.dc-ut-align-right {
  justify-content: flex-end !important;
}

.dc-ut-featured-icon-wrap--top.dc-ut-align-left,
.dc-ut-featured-icon-wrap--left.dc-ut-align-left,
.dc-ut-featured-icon-wrap--right.dc-ut-align-left {
  justify-content: flex-start !important;
}

.dc-ut-featured-icon {
  display: block !important;
  width: auto !important;
  max-width: var(--dc-ut-feat-icon-width, 48px) !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

.dc-ut-featured-icon img,
.dc-ut-featured-icon-wrap img {
  display: block !important;
  width: auto !important;
  max-width: var(--dc-ut-feat-icon-width, 48px) !important;
  height: auto !important;
  object-fit: contain !important;
  border: 0 !important;
  flex: 0 0 auto !important;
}

.dc-ut-featured-title,
.dc-ut-featured-item .dc-ut-featured-title,
.dc-ut-featured-item h1.dc-ut-featured-title,
.dc-ut-featured-item h2.dc-ut-featured-title,
.dc-ut-featured-item h3.dc-ut-featured-title,
.dc-ut-featured-item h4.dc-ut-featured-title,
.dc-ut-featured-item h5.dc-ut-featured-title,
.dc-ut-featured-item h6.dc-ut-featured-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: none !important;
  border-top: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  line-height: 1.3 !important;
  position: static !important;
  float: none !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-size: var(--dc-ut-feat-header-font-size, 18px) !important;
  font-weight: var(--dc-ut-feat-header-font-weight, 700) !important;
  color: var(--dc-ut-feat-header-color, #111827) !important;
  text-align: var(--dc-ut-feat-header-align, left) !important;
  text-transform: var(--dc-ut-feat-header-transform, none) !important;
}

.dc-ut-featured-body {
  display: block !important;
  flex: 1 1 auto !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: inherit !important;
  font-size: var(--dc-ut-feat-body-font-size, 15px) !important;
  font-weight: var(--dc-ut-feat-body-font-weight, 400) !important;
  color: var(--dc-ut-feat-body-color, #4b5563) !important;
  text-align: var(--dc-ut-feat-body-align, left) !important;
  text-transform: var(--dc-ut-feat-body-transform, none) !important;
}

.dc-ut-featured-body p:last-child {
  margin-bottom: 0 !important;
}

.dc-ut-featured-btn {
  display: inline-block !important;
  padding: 8px 16px !important;
  border: 1px solid currentColor !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: opacity 0.2s ease !important;
  align-self: flex-start !important;
  color: inherit !important;
  background: transparent !important;
}

.dc-ut-featured-btn:hover {
  opacity: 0.8 !important;
  text-decoration: none !important;
}

/* align="left|center|right" */
.dc-ut-featured-title.dc-ut-align-left,
.dc-ut-featured-body.dc-ut-align-left {
  text-align: left !important;
}

.dc-ut-featured-title.dc-ut-align-center,
.dc-ut-featured-body.dc-ut-align-center {
  text-align: center !important;
}

.dc-ut-featured-title.dc-ut-align-right,
.dc-ut-featured-body.dc-ut-align-right {
  text-align: right !important;
}

.dc-ut-featured-btn.dc-ut-align-left {
  align-self: flex-start !important;
}

.dc-ut-featured-btn.dc-ut-align-center {
  align-self: center !important;
}

.dc-ut-featured-btn.dc-ut-align-right {
  align-self: flex-end !important;
}

/* ═══════════════════════════════════════════
 *  REDUCED MOTION
 * ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .dc-ut-accordion-body,
  .dc-ut-accordion-header,
  .dc-ut-accordion-arrow,
  .dc-ut-accordion-body-panel {
    transition: none !important;
  }

  .dc-ut-accordion-body-panel {
    opacity: 1 !important;
  }

  .dc-ut-accordion-item:not(.is-open) .dc-ut-accordion-body-panel {
    opacity: 0 !important;
  }
}