/*----------------------------------------------------------------
  # Custom WooCommerce Accordion Tabs Styles
  # UPDATED AT: October 13, 2025 - CSS CHANGES TEST
------------------------------------------------------------------

  ## 1.0 Accordion Container
  ## 2.0 Tab Headers
  ## 3.0 Tab Content
  ## 4.0 Animations & Transitions
  ## 5.0 Icons & Toggle States
  ## 6.0 Responsive Design

----------------------------------------------------------------*/

/* ==========================================================================
   ## 1.0 Accordion Container
   ========================================================================== */

.wc-accordion-tabs {
  overflow: hidden;
  background: #ffffff;
}

.wc-accordion-tab-item {
  border-bottom: 1px solid #dde0e3;
}

/* ==========================================================================
   ## 2.0 Tab Headers
   ========================================================================== */

.wc-accordion-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  cursor: pointer;
  border: none;
  outline: none;
}

.wc-accordion-tab-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #40484f;
  line-height: 24px;
}

/* ==========================================================================
   ## 3.0 Tab Content
   ========================================================================== */

.wc-accordion-tab-content {
  background: #ffffff;
  overflow: hidden;
}

.wc-accordion-tab-content.active {
  display: block !important;
}

.wc-accordion-tab-content-inner {
  padding: 0;
  border-top: none;
}

/* Remove default WooCommerce tab styling conflicts */
.wc-accordion-tabs .woocommerce-Tabs-panel {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   ## 4.0 Animations & Transitions
   ========================================================================== */

.wc-accordion-tab-content {
  max-height: 0;
  padding: 0 1.5rem;
}

.wc-accordion-tab-content.active {
  max-height: 1000px; /* Large enough to accommodate content */
  padding: 0 1.5rem;
}

.wc-accordion-tab-content.active .wc-accordion-tab-content-inner {
  opacity: 1;
  transform: translateY(0);
}

.wc-accordion-tab-content:not(.active) .wc-accordion-tab-content-inner {
  opacity: 0;
  transform: translateY(-10px);
}

/* ==========================================================================
   ## 5.0 Icons & Toggle States
   ========================================================================== */

.wc-accordion-tab-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.wc-accordion-tab-toggle svg {
  width: 20px;
  height: 20px;
}

/* Default state - show expand icon */
.wc-accordion-tab-header[aria-expanded="false"] .wc-accordion-icon-expand {
  opacity: 1;
}

.wc-accordion-tab-header[aria-expanded="false"] .wc-accordion-icon-collapse {
  opacity: 0;
  position: absolute;
}

/* Expanded state - show collapse icon */
.wc-accordion-tab-header[aria-expanded="true"] .wc-accordion-icon-expand {
  opacity: 0;
  position: absolute;
}

.wc-accordion-tab-header[aria-expanded="true"] .wc-accordion-icon-collapse {
  opacity: 1;
}

/* ==========================================================================
   ## 6.0 Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
  .wc-accordion-tab-content {
    padding: 0 1rem;
  }

  .wc-accordion-tab-content.active {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .wc-accordion-tab-header {
    padding: 8px 0px;
  }

  .wc-accordion-tab-content-inner {
    padding: 0px;
  }

  .wc-accordion-tab-content {
    padding: 0 0.75rem;
  }

  .wc-accordion-tab-content.active {
    padding: 0 0.75rem;
  }
}

/* ==========================================================================
   ## 7.0 Content Styling Enhancements
   ========================================================================== */

/* Enhanced styling for tab content */
.wc-accordion-tab-content-inner h2,
.wc-accordion-tab-content-inner h3,
.wc-accordion-tab-content-inner h4 {
  margin-top: 0;
}

.wc-accordion-tab-content-inner p:last-child {
  margin-bottom: 0;
}

/* Product description specific styling */
.wc-accordion-tab-content-inner ul,
.wc-accordion-tab-content-inner ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.wc-accordion-tab-content-inner li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* Product attributes table styling */
.wc-accordion-tab-content-inner .shop_attributes {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.wc-accordion-tab-content-inner .shop_attributes tr {
  border-bottom: 1px solid #e0e0e0;
}

.wc-accordion-tab-content-inner .shop_attributes th,
.wc-accordion-tab-content-inner .shop_attributes td {
  text-align: left;
  vertical-align: top;
}

.wc-accordion-tab-content-inner .shop_attributes th {
  font-weight: 600;
  width: 30%;
}