/**************** [ Lazy Menu Styles ] ****************/

.t-block {
    display: flex;
    flex-direction: row; /* Default for PC: tabs on left, content on right */
    border: 1px solid #ddd;
    border-radius: 5px;
    max-width: 100%;
    box-shadow: 0 5px 15px #0000001a;
    margin-bottom: 20px;
    overflow: hidden;
}

.t-tabs-wrapper { /* New wrapper for PC tabs */
    height: 640px; /* Fixed height for PC */
    width: 27%; /* Fixed width for PC */
    background-color: #f3f3f3;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Custom scrollbar styles for Webkit browsers (Chrome, Safari, Edge) */
.t-tabs-wrapper::-webkit-scrollbar {
    width: 10px;
}
.t-tabs-wrapper::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 5px;
}
.t-tabs-wrapper::-webkit-scrollbar-thumb {
    background-color: #d4d4d4;
    border-radius: 5px;
}

.t-tab {
    padding: 9px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 15px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #e6e5e5;
    border-left: 1px solid #e6e5e5;
    border-right: 1px solid #e6e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.t-title {
    padding-left: 7px;
}

.t-tab:hover {
    background-color: #e9e9e9;
}

/* Active state for PC tabs */
.t-tab.active {
  	background-color: #fafafa;
  	border-right: 6px solid #B76E79;
}

/* Depth-based styling for tabs */

.t-tab.depth-0 { color: #333; }
.t-tab.depth-1 { color: #4385FF; }
.t-tab.depth-2 { color: #FFB146; }
.t-tab.depth-3 { color: #73CC30; }
.t-tab.depth-4 { color: #e092e0; }
.t-tab.depth-5 { color: #d80b27; }

/* PC Content Area */
.t-tab-con { /* Changed class name */
    flex-grow: 1;
    padding: 20px;
    background-color: #fff;
    overflow-y: auto;
    height: 640px; /* Fixed height for PC, matches tabs */
}

.t-tab-con .dd {
  font-size: 107%;
	text-shadow: 1px 1px 1px #b6b6b6;
  font-weight: bold;
  margin-bottom: 17px;
  text-align: center;
}

.t-tab-con .b1 {
  font-size: 107%;
  font-weight: bold;
  color: #4385FF;
  text-shadow: 1px 1px 1px #92b8ff;

}

.t-tab-con .b2 {
  font-size: 102%;
  font-weight: bold;
  margin-left: 19px;
	color: #FFB146;
	text-shadow: 1px 1px 1px #f8ce94;


}

.t-tab-con .b3 {
  font-size: 102%;
  font-weight: bold;
  margin-left: 37px;
	color: #73CC30;
	text-shadow: 1px 1px 1px #c0f895;

}

.t-tab-con .b4 {
  font-size: 102%;
  font-weight: bold;
  margin-left: 54px;
	color: #e092e0;
	text-shadow: 1px 1px 1px #fdd5fd;

}

.t-tab-con .b5 {
  font-size: 102%;
  font-weight: bold;
  margin-left: 72px;
	color: #f16524;
	text-shadow: 1px 1px 1px #f5dfc1;

}

.t-tab-con .d1 {
  text-indent: 1.5em;
  display: block;
text-align: left;
}

.t-tab-con .d2 {
  text-indent: 2.6em;
  display: block;
text-align: left;

}

.t-tab-con .d3 {
  text-indent: 3.7em;
  display: block;
text-align: left;

}

.t-tab-con .d4 {
  text-indent: 4.8em;
  display: block;
text-align: left;

}

.t-tab-con .d5 {
  text-indent: 5.9em;
  display: block;
text-align: left;

}

.t-tab-con .ts {
	text-indent: 1em;
    margin:7px 0 9px 0;
	color: #13bbee;
    display: block;

}

.t-tab-con .ts1 {
	text-indent: 1em;
  margin:7px 0 9px 0;
	color: #13bbee;

}

.t-tab-con .te {
	color: #8a8989;
	text-shadow: 1px 1px 1px #acacac;
	display: block;
  	text-align: center;

}


/* Content pane for each tab (hidden in PC, used in Mobile Accordion) */
.t-con-pane { /* New style */
    display: none; /* Hidden by default in PC */
    width: 100%; /* For mobile layout */
    padding: 0; /* No padding by default, content will add it */
    background-color: #fdfdfd;
}


/* Loading indicator */
.t-tab-con .loading,
.t-con-pane .loading { /* Apply to both content areas */
    text-align: center;
    font-style: italic;
    color: #777;
    padding: 20px;
}


/* Mobile Styles (Accordion Layout) */
@media (max-width: 768px) {
    .t-block {
        flex-direction: column; /* Stack tabs and content vertically */
    }

    .t-tabs-wrapper { /* This wrapper is now just an outer container for mobile accordion items */
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: none; /* No border for the wrapper itself */
        overflow-y: visible;
        background-color: transparent; /* Transparent background for accordion wrapper */
    }

    .t-tab {
        border-top: 1px solid #ddd; /* Add top border for each accordion item */
        border-left: none;
        border-right: none;
        border-bottom: none; /* No bottom border here, content pane will have it */
        background-color: #f9f9f9;
        margin-bottom: 0; /* Ensure no gap between tab and content pane */
    }

    .t-tab:first-child {
        border-top: none; /* Remove top border for the very first tab to avoid double border with block */
    }
    .t-tab:last-child {
        border-bottom: none; /* Remove bottom border from last tab */
    }

    /* Arrow icon for mobile accordion */
    .t-arrow {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #555;
        transition: transform 0.2s ease-in-out;
    }

    .t-tab.active-mobile .t-arrow {
        transform: rotate(180deg); /* Rotate arrow when active */
    }

    /* PC Content Area is hidden in mobile */
    .t-tab-con {
        display: none;
    }

    /* Content pane for each tab in mobile */
    .t-con-pane {
        display: none; /* Hidden by default in mobile accordion */
        width: 100%;
        padding: 15px 20px; /* Add padding here for content */
        border-bottom: 1px solid #ddd; /* Border below content pane */
        background-color: #ffffff;
    }

    .t-con-pane.active-mobile-content {
        display: block; /* Show content when active in mobile */
    }

    /* Active state for mobile tabs */
    .t-tab.active-mobile {
        background-color: #ffffff;
        font-weight: bold;
        border-bottom: 1px solid #fff; /* Border to make it blend with content pane */
    }

    /* Remove PC active state styles if they conflict */
    .t-tab.active {
        border-right: 1px solid #e6e5e5;
        font-weight: normal;
    }
}