/* Slippry Slider Customization for Index New */

/* Adjust wrapper to allow flow */
.sy-box {
    margin-bottom: 20px;
}

#indexbanner img {
    max-width: 730px;
}

.sy-slides-wrap {
    /* Ensure slides are visible and take space */
    position: relative;
}

/* Caption: Move below the image */
.sy-caption-wrap {
    /* Styles will be enforced by JS ordering, but keep basic styling here */
    background-color: #000 !important; /* Black background for caption strip */
    padding: 10px 0 !important;
    width: 100% !important;
    position: relative !important;
    left: 0 !important; /* Fix alignment */
    text-align: center !important; /* Center the inner content */
}
.sy-caption-wrap .sy-caption {
    background-color: transparent !important; /* Remove inner pill background */
    color: #fff !important;
    position: relative !important;
    left: auto !important; /* Reset any offset */
    right: auto !important;
    border-radius: 0 !important;
    padding: 0 15px !important;
    text-align: center !important;
    display: inline-block !important; /* Allow centering by parent */
    width: auto !important; /* Let text determine width or 100% if needed */
    max-width: 100%;
    font-size: 1rem !important;
    font-weight: bold !important;
    margin: 0 auto; /* Center block */
}

/* Pager: Change dots to dashes */
.sy-pager {
    display: none !important; /* 輪播顯示線取消 */
}

/* Pager Items */
.sy-pager li {
    width: 20px !important; /* Dash width */
    height: 4px !important; /* Dash height */
    border-radius: 0 !important; /* Rectangle */
    margin: 0 5px !important;
}
.sy-pager li a {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    background-color: #666 !important; /* Inactive color */
}
.sy-pager li.sy-active a {
    background-color: #fff !important; /* Custom Tabs for Index New */
}
#leftnav {
    border-bottom: 0;
    margin-bottom: 0;
    gap: 0;
    padding-bottom: 0;
    margin-top: -5px;
    background-color: transparent !important;
}

#leftnav .nav-item {
    padding: 0;
    margin: 0;
    overflow: visible; /* Important for overlapping */
}

#leftnav .nav-link {
    border: none;
    
    /* SVG Background Style - Dark Gray Gradient for Inactive */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='200' height='44' viewBox='0 0 200 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 1C3.6863 1 1 3.68629 1 7V37C1 40.3137 3.68629 43 7 43H192.581C197.391 42.9997 200.245 37.6221 197.55 33.6377L177.254 3.6377C176.138 1.9884 174.277 1.00013 172.285 1H7Z' fill='url(%23paint1_linear)' stroke='black' stroke-width='2'/%3E%3Cdefs%3E%3ClinearGradient id='paint1_linear' x1='102' y1='2' x2='102' y2='42' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.35' stop-color='%231E1E1E'/%3E%3Cstop offset='1' stop-color='black'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent !important;
    
    color: #999; /* Inactive text color */
    text-align: center;
    font-weight: normal;
    position: relative;
    padding: 0 40px 0 20px; /* Padding for shape */
    height: 44px;
    line-height: 44px; /* Vertically center */
    width: 100%;
    
    /* Remove old shape/border */
    border-radius: 0;
    transform: none;
    clip-path: none;
    
    margin-right: -30px; /* Stronger overlap for前後感 */
    z-index: 1;
}


#leftnav .nav-link span {
    /* Reset text transform */
    transform: none;
    display: inline-block;
    width: 100%;
}

/* Fix first tab alignment */
#leftnav .nav-item:first-child .nav-link {
   margin-left: 0;
   z-index: 10;
}

#leftnav .nav-item:last-child .nav-link {
    margin-left: 0; 
    z-index: 5;
}

/* Active State */
#leftnav .nav-link.active {
    color: #fff;
    /* Red SVG for active state */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='200' height='44' viewBox='0 0 200 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 1C3.6863 1 1 3.68629 1 7V37C1 40.3137 3.68629 43 7 43H192.581C197.391 42.9997 200.245 37.6221 197.55 33.6377L177.254 3.6377C176.138 1.9884 174.277 1.00013 172.285 1H7Z' fill='url(%23paint0_linear)' stroke='black' stroke-width='2'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='102' y1='2' x2='102' y2='42' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.35' stop-color='%237B0205'/%3E%3Cstop offset='1' stop-color='black'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    z-index: 20;
}

#leftnav .nav-link:hover {
    color: #fff;
}

/* Tab Content Container */
#myTabContent {
    background-color: #000 !important;
    border: none;
    color: #fff;
    min-height: 400px;
    padding: 15px;
    margin-top: -1px; /* Remove gap */
}

/* Model Showcase Customization */
.row.index_modelbox {
    margin: 0 -7px; /* Compensate for column padding */
}

.row.index_modelbox .col {
    padding: 0 7px !important; /* Increased gap even more per request (total 14px gap) */
    margin-bottom: 15px;
}

.row.index_modelbox a {
    border: none !important;
    background-color: transparent !important;
    display: block !important;
    border-radius: 0 !important;
    text-decoration: none;
}

.img_block {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4; /* Set a fixed portrait aspect ratio */
    overflow: hidden;
    position: relative;
    min-height: 0 !important; /* Override global min-height */
    border-radius: 10px 10px 0 0;
}

.img_block img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crop to fill */
    object-position: top center;
    position: absolute;
    top: 0;
    left: 0;
}

.index_modelbox .name {
    color: #fff !important;
    font-size: 0.9rem;
    margin-top: 5px;
    display: block;
}
/* Hide extra large spacing if any */
.showbox {
    margin-top: 20px;
}

/* New Title Style matching the Tab Look */
.showbox-title {
    position: relative;
    display: inline-block; /* Wrap content */
    /* SVG Background Style */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='200' height='44' viewBox='0 0 200 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 1C3.6863 1 1 3.68629 1 7V37C1 40.3137 3.68629 43 7 43H192.581C197.391 42.9997 200.245 37.6221 197.55 33.6377L177.254 3.6377C176.138 1.9884 174.277 1.00013 172.285 1H7Z' fill='url(%23paint0_linear)' stroke='black' stroke-width='2'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='102' y1='2' x2='102' y2='42' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.35' stop-color='%237B0205'/%3E%3Cstop offset='1' stop-color='black'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent !important;
    
    width: auto;
    min-width: 150px; /* Ensure minimum width for shape */
    height: 44px;
    line-height: 44px; /* Vertically center text */
    padding: 0 50px 0 20px; /* Adjust padding for shape */
    
    color: #fff;
    font-weight: normal;
    font-size: 1rem; 
    
    margin-bottom: 2px; 
    text-decoration: none !important;
}

.showbox-title:hover {
    /* Set text color to white on hover as requested */
    color: #fff !important; 
    text-decoration: none !important;
}

.showbox-title img {
    /* Hide the old image if any inside */
    display: none; 
}

.showbox-title span.title-text {
    /* New text span if needed, or direct text */
    /*font-size: 1.2rem; */
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.showbox .more-link, .more-button {
    /* Position 'more' to the far right of the container, not inside the tab */
    float: right;
    color: #fff;
    margin-top: 5px;
    text-decoration: none;
    background-color: #000; /* Button background */
    padding: 2px 12px;
    font-size: 0.9rem;    
}