/* ============================================================
   Product Page — Tab-to-Toggle layout
   File: assets/css/product-toggles.css
   ============================================================ */

/* ----------------------------------------------------------
   Neutralise Avada's vertical/horizontal tabs chrome that
   applies to .fusion-woo-tabs-tb > .woocommerce-tabs since
   we replaced the inner tab/nav structure entirely.
   ---------------------------------------------------------- */
.fusion-woo-tabs-tb .igcs-product-toggles {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Cancel any flex row / grid layout Avada injects for vertical tabs */
    grid-template-columns: unset;
    grid-template-rows: unset;
}

/* ----------------------------------------------------------
   Individual toggle item
   ---------------------------------------------------------- */
.igcs-product-toggles .igcs-toggle-item {
    border: 1px solid var(--awb-border-color, #e5e5e5);
    border-top: none;
}

.igcs-product-toggles .igcs-toggle-item:first-child {
    border-top: 1px solid var(--awb-border-color, #e5e5e5);
}

/* ----------------------------------------------------------
   Toggle title button
   ---------------------------------------------------------- */
.igcs-product-toggles .igcs-toggle-title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--awb-typography3-font-family, inherit);
    font-size: var(--awb-typography3-font-size, 1em);
    font-weight: 600;
    color: var(--awb-color8, #333);
    line-height: 1.4;
    transition: background 0.2s ease, color 0.2s ease;
}

.igcs-product-toggles .igcs-toggle-title:hover,
.igcs-product-toggles .igcs-toggle-item.igcs-open > .igcs-toggle-title {
    background: var(--awb-color1, #f5f5f5);
    color: var(--awb-color6, #222);
}

.igcs-product-toggles .igcs-toggle-title:focus-visible {
    outline: 2px solid var(--awb-color5, #2d7abd);
    outline-offset: -2px;
}

/* ----------------------------------------------------------
   +/− icon (two bars forming a cross → minus when open)
   ---------------------------------------------------------- */
.igcs-product-toggles .igcs-toggle-icon {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.igcs-product-toggles .igcs-toggle-icon::before,
.igcs-product-toggles .igcs-toggle-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Horizontal bar — always visible */
.igcs-product-toggles .igcs-toggle-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

/* Vertical bar — hidden (rotated away) when open */
.igcs-product-toggles .igcs-toggle-icon::after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.igcs-product-toggles .igcs-toggle-item.igcs-open .igcs-toggle-icon::after {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
}

/* ----------------------------------------------------------
   Toggle content panel
   ─────────────────────────────────────────────────────────
   Avada's CSS hides .woocommerce-Tabs-panel via display:none
   and only shows the active one (via .active class set by
   WooCommerce's tab JS). Since we replaced the tab structure
   with toggles, that JS never runs and panels stay hidden.

   Fix: hide all panels by default, show them only when the
   parent .igcs-toggle-item has the .igcs-open class.
   Use !important to beat Avada's specificity.
   ---------------------------------------------------------- */

/* Hide all toggle panels by default */
.igcs-product-toggles .igcs-toggle-content {
    display: none !important;
    padding: 20px 20px 24px;
    border-top: 1px solid var(--awb-border-color, #e5e5e5);
}

/* Show panel when its parent toggle item is open */
.igcs-product-toggles .igcs-toggle-item.igcs-open > .igcs-toggle-content {
    display: block !important;
}

/* Remove extra margin from first/last child inside panel */
.igcs-product-toggles .igcs-toggle-content > *:first-child {
    margin-top: 0;
}
.igcs-product-toggles .igcs-toggle-content > *:last-child {
    margin-bottom: 0;
}

/* Also override Avada's padding/border applied to .woocommerce-Tabs-panel */
.igcs-product-toggles .woocommerce-Tabs-panel {
    padding: 20px 20px 24px !important;
    border: none !important;
    margin: 0 !important;
}