/* --- Global Tab Navigation --- */
.tab-nav { /* Ensure your PHP wrapper uses this class */
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none; /* Just in case it's converted to a <ul> */
}

.tab-trigger {
    background: none;
    border: none;
    padding: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted, #666);
    cursor: pointer;
    position: relative;
    transition: color var(--timing-fast, 0.2s) ease;
}

.tab-trigger::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--surface-primary, #000);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--timing-fast, 0.2s) ease;
}

.tab-trigger:hover,
.tab-trigger.active { 
    color: var(--text-main, #111); 
}

.tab-trigger.active::after { 
    transform: scaleX(1); 
}

/* --- Pattern 01: Fading Architecture --- */
.fade-panel {
    display: none;
    opacity: 0;
    will-change: opacity; /* Pre-optimizes browser rendering */
    transition: opacity var(--timing-fast, 0.2s) ease-in-out;
}

.fade-panel.is-active {
    display: block;
}

.fade-panel.is-visible {
    opacity: 1;
}

/* --- Pattern 02: Collapsing Architecture --- */
.collapse-panel-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    /* Upgraded to an easeOutExpo curve for a snappy start and buttery deceleration */
    transition: grid-template-rows 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.collapse-panel-wrapper.is-active {
    grid-template-rows: 1fr;
}

.collapse-panel-inner {
    overflow: hidden; 
    visibility: hidden; /* Prevents hidden links from being tabbed via keyboard */
    transition: visibility 0.5s;
}

.collapse-panel-wrapper.is-active .collapse-panel-inner {
    visibility: visible;
}

/* 
 * The Secret to Premium Smoothness:
 * We animate the inner content independently of the outer wrapper 
 */
.collapse-content {
    opacity: 0;
    transform: translateY(12px); /* Pushes it down slightly while hidden */
    transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1), 
                transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.collapse-panel-wrapper.is-active .collapse-content {
    opacity: 1;
    transform: translateY(0);
    /* A tiny delay ensures the wrapper starts opening before the content fades in */
    transition-delay: 0.1s; 
}

.tab-system .custom-select-wrapper {
    margin-bottom: 1.5rem;
}

.custom-select-wrapper .tab-trigger::after {
    display: none;
}