/* /wp-content/plugins/egh-tabbed-content/css/egh-tabbed-content.css */

:root {
    --steps-purple-dark: #800080;
    --steps-purple-light: #f2e6f2;
    --steps-purple-hover: #6a006a;
    --steps-purple-active-hover: #5c005c; /* Kept from original for active hover consistency */
    --steps-text-color: #333;
    --steps-text-color-light: #ffffff;
    --steps-separator-color: #e0e0e0;
    --steps-inactive-border-color: #d1b3d1; /* Adapted from original inactive border */
}

.egh-tc-wrapper {
    margin: 0 auto; /* Removed top margin, kept horizontal auto for centering */
    padding: 0;
    background-color: transparent;
    /* Font family moved to button elements for higher specificity */
}

/* Main Tabs Navigation */
.egh-tc-tabs-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px; /* Matched to .steps */
    padding-bottom: 15px; /* Matched to .steps */
    border-bottom: 1px solid var(--steps-separator-color); /* Matched to .steps */
    gap: 10px;
}

.egh-tc-tab-button {
    padding: 10px 20px;
    cursor: pointer;
    background-color: var(--steps-purple-light);
    color: var(--steps-text-color);
    border: 1px solid var(--steps-inactive-border-color); /* Matched to .step */
    border-radius: 16px; /* Restored slight pill shape */
    font-family: 'Poppins', sans-serif !important; /* Changed to Poppins */
    font-size: 1rem; /* Matched to .step */
    font-weight: 500; /* Set font-weight for inactive tabs */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-align: center;
    flex-grow: 0;
    flex-shrink: 0;
    /* margin-bottom: 15px; Removed as gap is used in nav and nav has margin-bottom */
}

.egh-tc-tab-button:hover {
    background-color: var(--steps-purple-hover);
    color: var(--steps-text-color-light);
    border-color: var(--steps-purple-hover); /* Matched to .step:hover */
}

.egh-tc-tab-button.is-active {
    background-color: var(--steps-purple-dark);
    color: var(--steps-text-color-light);
    border-color: var(--steps-purple-dark); /* Matched to .step.is-active */
    font-family: 'Poppins', sans-serif !important; /* Changed to Poppins */
    font-weight: bold;
}

.egh-tc-tab-button.is-active:hover {
    background-color: var(--steps-purple-active-hover); /* Kept original active hover */
    border-color: var(--steps-purple-active-hover);
}

/* Main Tab Panels */
.egh-tc-tab-panel {
    margin-top: 20px; /* Matched to .content */
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0;
    display: none; /* Initially hidden, JS sets to block for transition */
    opacity: 0;
    max-height: 0; /* Collapsed by default */
    overflow: hidden;
    /* Transition for hiding: swipe-up (max-height) and fade-out (opacity) */
    transition: opacity 0.3s ease-in-out, max-height 0.4s ease-out;
    /* min-height: 250px; Removed as .content does not have it */
}

.egh-tc-tab-panel.is-active {
    display: block; /* JS ensures this is set before class for transition */
    opacity: 1;
    max-height: none; /* Large enough value for typical content, adjust if necessary */
    /* Transition for showing: only fade-in (opacity). max-height change is instant. */
    transition: opacity 0.3s ease-in-out; 
}

/* Sub-Tabs Styling (adapted from main tabs to match "steps" look) */
.egh-tc-sub-tabs-wrapper {
    /* margin-bottom: 15px; Let content panel handle top margin if needed */
}

.egh-tc-sub-tabs-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px; /* Matched to .steps */
    padding-bottom: 15px; /* Matched to .steps */
    border-bottom: 1px solid var(--steps-separator-color); /* Matched to .steps */
    gap: 10px;
}

.egh-tc-sub-tab-button {
    padding: 8px 15px; /* Slightly smaller for sub-tabs */
    cursor: pointer;
    background-color: var(--steps-purple-light);
    color: var(--steps-text-color);
    border: 1px solid var(--steps-inactive-border-color); /* Matched to .step */
    border-radius: 12px; /* Restored slight pill shape */
    font-family: 'Poppins', sans-serif !important; /* Changed to Poppins */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-size: 0.9rem; /* Slightly smaller for sub-tabs */
    font-weight: 500; /* Set font-weight for inactive sub-tabs */
    text-align: center;
    /* margin-bottom: 15px; Removed */
}

.egh-tc-sub-tab-button:hover {
    background-color: var(--steps-purple-hover);
    color: var(--steps-text-color-light);
    border-color: var(--steps-purple-hover); /* Matched to .step:hover */
}

.egh-tc-sub-tab-button.is-active {
    background-color: var(--steps-purple-dark);
    color: var(--steps-text-color-light);
    font-family: 'Poppins', sans-serif !important; /* Changed to Poppins */
    font-weight: bold;
    border-color: var(--steps-purple-dark); /* Matched to .step.is-active */
}

.egh-tc-sub-tab-button.is-active:hover {
    background-color: var(--steps-purple-active-hover); /* Kept original active hover */
    border-color: var(--steps-purple-active-hover);
}

.egh-tc-sub-tab-panel {
    display: none; /* Initially hidden, JS sets to block for transition */
    margin-top: 20px; /* Matched to .content */
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
    border-radius: 0;
    opacity: 0;
    max-height: 0; /* Collapsed by default */
    overflow: hidden;
    /* Transition for hiding: swipe-up (max-height) and fade-out (opacity) */
    transition: opacity 0.3s ease-in-out, max-height 0.4s ease-out;
    /* min-height: 250px; Removed */
}

.egh-tc-sub-tab-panel.is-active {
    display: block; /* JS ensures this is set before class for transition */
    opacity: 1;
    max-height: none; /* Large enough value for typical content, adjust if necessary */
    /* Transition for showing: only fade-in (opacity). max-height change is instant. */
    transition: opacity 0.3s ease-in-out;
}

/* Basic loading message style (kept from original) */
.egh-tc-tab-panel .egh-tc-loading-message,
.egh-tc-tab-panel .egh-tc-error-message,
.egh-tc-sub-tab-panel .egh-tc-loading-message,
.egh-tc-sub-tab-panel .egh-tc-error-message {
    padding: 15px;
    text-align: center;
    color: var(--steps-text-color); /* Updated variable */
}

/* AJAX Loading Spinner Styles (kept from original) */
.egh-tc-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 20px;
}

.egh-tc-loading-spinner::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 4px solid rgba(128, 0, 128, 0.2); /* Purple with alpha */
    border-radius: 50%;
    border-top-color: var(--steps-purple-dark); /* Updated variable */
    animation: egh-tc-new-spin 0.8s ease-in-out infinite;
}

@keyframes egh-tc-new-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}