/* --- Custom Product Tabs Styling --- */

/* Common styles for all views */
.custom-product-tabs {
  margin-top: 30px;
  padding-bottom: 20px;
}

/* Desktop Tab Styling */
.desktop-tabs .tabs.wc-tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 -1px 0; /* Overlap border */
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.desktop-tabs .tabs.wc-tabs li {
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  background-color: #f7f7f7;
  display: inline-block;
  position: relative;
  z-index: 0;
  border-radius: 4px 4px 0 0;
  margin: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.desktop-tabs .tabs.wc-tabs li a {
  display: inline-block;
  padding: 10px 20px;
  font-weight: bold;
  text-decoration: none;
  color: #515151;
  transition: color 0.3s ease;
}

.desktop-tabs .tabs.wc-tabs li:hover {
  background-color: #eee;
  border-color: #ccc;
  border-bottom-color: transparent;
}

.desktop-tabs .tabs.wc-tabs li:hover a {
  color: #222;
}

.desktop-tabs .tabs.wc-tabs li.active {
  background: #ffffff;
  z-index: 2;
  border-bottom-color: #ffffff;
}

.desktop-tabs .tabs.wc-tabs li.active a {
  color: #333;
  text-shadow: none;
}

/* Tab Panel Styling */
.desktop-tabs .panel.wc-tab {
  padding: 2em;
  border: 1px solid #ddd;
  border-top: none;
  background-color: #fff;
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
  clear: both;
  line-height: 1.6 !important;
}

#pdp-main-tabs > div.woocommerce-Tabs-panel li {
  line-height: 1.6 !important;
}

.desktop-tabs .panel.wc-tab > *:first-child {
  margin-top: 0;
}

.desktop-tabs .panel.wc-tab > *:last-child {
  margin-bottom: 0;
}

/* Mobile Accordion Styling */
.mobile-tabs {
  display: none; /* Hidden by default, shown on mobile via media query */
}

/* Style the buttons that are used to open and close the accordion panel */
.mobile-tabs .accordion {
  background-color: #f7f7f7;
  color: #515151;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  text-align: left;
  border: 1px solid #ddd;
  border-top: none;
  outline: none;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.3s ease-out;
  position: relative;
}

/* First accordion button needs a top border */
.mobile-tabs .accordion:first-child {
  border-top: 1px solid #ddd;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.mobile-tabs .accordion.active,
.mobile-tabs .accordion:hover {
  background-color: #e7e7e7;
  color: #333;
}

/* Add plus/minus icon */
.mobile-tabs .accordion:after {
  content: "\002B"; /* Unicode character for "plus" sign (+) */
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.mobile-tabs .accordion.active:after {
  content: "\2212"; /* Unicode character for "minus" sign (-) */
  transform: rotate(180deg); /* Rotate for visual effect */
}

/* Style the accordion panel */
.custom-product-tabs.mobile-tabs .panel {
  background-color: white;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease-out, padding 0.4s ease, opacity 0.4s ease;
  padding: 0 15px;
  opacity: 0;
  margin-bottom: -1px;
}

.custom-product-tabs.mobile-tabs .panel p,
.custom-product-tabs.mobile-tabs .panel div,
.custom-product-tabs.mobile-tabs .panel span,
.custom-product-tabs.mobile-tabs .panel li {
  line-height: 1.2 !important;
}

/* When panel is active/visible */
.mobile-tabs .panel.active {
  max-height: 2000px; /* Large enough to fit content */
  padding: 15px;
  opacity: 1;
  border-bottom: 1px solid #ddd;
}

/* Responsive Media Queries */
@media (max-width: 768px) {
  .desktop-tabs {
    display: none; /* Hide desktop tabs on mobile */
  }

  .mobile-tabs {
    display: block; /* Show accordion on mobile */
  }
}