.smHTL-container {
    width: 100%; height: 100%;
    background-color: #ffffff; /* Default main background */
    border: 1px solid #ddd; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex; flex-direction: column; position: relative;
    -webkit-user-select: none; user-select: none;
}
.smHTL-slides-container {
    flex-grow: 1; position: relative; overflow: hidden;
}
.smHTL-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; padding: 20px; box-sizing: border-box;
    opacity: 0; visibility: hidden;
}
.smHTL-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.smHTL-slide-media { flex: 0 0 45%; margin-right: 20px; }
.smHTL-slide-media img { 
    width: 100%; height: 100%; 
    object-fit: var(--smHTL-image-fit-mode, cover); 
}

.smHTL-slide-content { 
    flex: 1; 
    overflow-y: auto; 
    padding-right: 10px; 
    color: var(--smHTL-content-text-color, #333);}

.smHTL-navigation {
    flex-shrink: 0; height: 60px;
    background-color: #f8f8f8;
    border-top: 1px solid #ddd; display: flex; align-items: center;
    padding: 0 15px; z-index: 10;
    overflow-x: auto; white-space: nowrap; scroll-behavior: smooth;
}
.smHTL-navigation::-webkit-scrollbar { height: 0; }
.smHTL-navigation { -ms-overflow-style: none; scrollbar-width: none; }

.smHTL-nav-item {
    cursor: pointer; padding: 10px 5px; color: #888; font-weight: bold;
    position: relative; margin: 0 10px;
}
.smHTL-nav-item.active { color: #2980b9;}
.smHTL-nav-item.active::before,
.smHTL-nav-item.active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.smHTL-nav-item.active::before {
    top: -5px;
    border-top: 6px solid; 
    border-top-color: inherit;
}

.smHTL-nav-item.active::after {
    bottom: -5px;
    border-bottom: 6px solid;
    border-bottom-color: inherit;
}

.smHTL-slide.image-only .smHTL-slide-media {
    flex-basis: 100%;
    margin-right: 0;
}
.smHTL-slide.image-only .smHTL-slide-content {
    flex-basis: 0;
    padding: 0;
}

.smHTL-slide.text-only .smHTL-slide-content {
    flex-basis: 100%;
}
.smHTL-slide.text-only .smHTL-slide-media {
    display: none;
}

.smHTL-slide.exit, .smHTL-slide.enter {opacity: 1; visibility: visible; animation-duration: 0.5s; animation-fill-mode: forwards;}
.smHTL-slide.enter { z-index: 2; } .smHTL-slide.exit { z-index: 1; }

.sm-fade .smHTL-slide.exit { animation-name: smHTL-fade-out; }
.sm-fade .smHTL-slide.enter { animation-name: smHTL-fade-in; }

.sm-slide-left .smHTL-slide.exit.forward { animation-name: smHTL-slide-out-left; }
.sm-slide-left .smHTL-slide.enter.forward { animation-name: smHTL-slide-in-right; }
.sm-slide-left .smHTL-slide.exit.backward { animation-name: smHTL-slide-out-right; }
.sm-slide-left .smHTL-slide.enter.backward { animation-name: smHTL-slide-in-left; }

.sm-slide-right .smHTL-slide.exit.forward { animation-name: smHTL-slide-out-right; }
.sm-slide-right .smHTL-slide.enter.forward { animation-name: smHTL-slide-in-left; }
.sm-slide-right .smHTL-slide.exit.backward { animation-name: smHTL-slide-out-left; }
.sm-slide-right .smHTL-slide.enter.backward { animation-name: smHTL-slide-in-right; }

.sm-slide-up .smHTL-slide.exit.forward { animation-name: smHTL-slide-out-up; }
.sm-slide-up .smHTL-slide.enter.forward { animation-name: smHTL-slide-in-down; }
.sm-slide-up .smHTL-slide.exit.backward { animation-name: smHTL-slide-out-down; }
.sm-slide-up .smHTL-slide.enter.backward { animation-name: smHTL-slide-in-up; }

.sm-slide-down .smHTL-slide.exit.forward { animation-name: smHTL-slide-out-down; }
.sm-slide-down .smHTL-slide.enter.forward { animation-name: smHTL-slide-in-up; }
.sm-slide-down .smHTL-slide.exit.backward { animation-name: smHTL-slide-out-up; }
.sm-slide-down .smHTL-slide.enter.backward { animation-name: smHTL-slide-in-down; }
@keyframes smHTL-fade-out { to { opacity: 0; } }
@keyframes smHTL-fade-in { from { opacity: 0; } }
@keyframes smHTL-slide-out-left { to { transform: translateX(-100%); } }
@keyframes smHTL-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes smHTL-slide-out-right { to { transform: translateX(100%); } }
@keyframes smHTL-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes smHTL-slide-out-up { to { transform: translateY(-100%); } }
@keyframes smHTL-slide-in-down { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes smHTL-slide-out-down { to { transform: translateY(100%); } }
@keyframes smHTL-slide-in-up { from { transform: translateY(-100%); } to { transform: translateY(0); } }