/***************************************/
/*  #P9U  */
/***************************************/
    
    zlh {
        /*margin:-0.4rem;*/
        position: sticky;
        top:0rem;
        padding: 0.2rem 0.6rem;
        /*margin: 0.6rem 0;*/
        background: #eeeeee;
        display: block;
        width:100%;
        font-weight: bold;
        border-top: 1px solid #c1c1c1;
        border-bottom: 1px solid #c1c1c1;


        &::before { content: " + "; }
        &[data-display="hide"]::before { content: " - "; float: right; }
        

        &:hover{ cursor: pointer;}
        &:first-child {margin-top: -1px;}
        
    }

    zls#zlsDiv.grid3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .zli{
            width:30%
        }
    }
    zls#zlsDiv.grid2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .zli{
            padding: 0.6rem 0.2rem;
            width:50%
        }
        .zli-title{
            
            font-size: unset;
                }

    }
    #zlsDiv.zls-dir {
        zli{
            border-bottom: 1px solid #dbdbdb;
        }
        zli:hover{
            cursor:pointer;
            font-weight:bold;
            background:#eee;
        }
        .zli-B {
            align-items: center;
            padding-left: 0.6rem;
        }    
    }
    /*   zli-A(carousel)    */
    .zli-A.carousel {

        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        /* Optional: Hide scrollbar for a cleaner look */
        scrollbar-width: none; /* Firefox */
        gap:0.8rem; 

        &::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Edge */
        }
        img {
            flex: 0 0 90%; /* Important: Each slide is 100% width */
            scroll-snap-align: start;
            width: 90%; /* Redundant, but ensures expected behavior */
        }
        &::scroll-button(left) {
            /* Generates the button and sets the icon/content */
            content: "⬅" / "Previous slide"; /* The content property is required to generate the button */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
            z-index: 10;
            /* Basic styling */
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

        &::scroll-button(right) {
            content: "⮕" / "Next slide";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
            z-index: 10;
            /* Basic styling */
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

        /* Optional: Style when button is disabled (at start/end of carousel) */
        /*&::scroll-button(*):disabled {
            opacity: 0.2;
            cursor: default;
        }*/
    }
/********************************************************/
/*                                                      */
/********************************************************/

        /*msgType*/

    zls,zli{ display: block; }
    zli{ background:white;}
    .zli-B {
        display: flex;
        flex-direction: row;
        width: -webkit-fill-available;        
    }
    .zli-cmenu{
        font-weight: bold;
        align-self: center;
        /*background: red;*/
        padding: 0.6rem 0.4rem;
        /*font-size:1.1rem;*/
    }
    .zli-des > *{
        margin:0.6rem 0;
        width:100%;
    }
    zls table {
            
        border-collapse: collapse; /* Merge borders of table cells */
        font-size: 0.9rem; /* Font size */

        th,  td {
            padding: 0.6rem; /* Space inside cells */
            text-align: left; /* Align text to the left */
            border: 1px solid #dddddd; /* Border for each cell */
        }
            
        th {
            background-color: #4CAF50; /* Header background color */
            color: white; /* Header text color */
        }
            
        tr:nth-child(even) {
            background-color: #f2f2f2; /* Alternate row background color */
        }
            
        td:hover {
            background-color: #d1e0e0; /* Highlight row on hover */
        }

    }
    

/********************************************************/
/*  zindex                                                */
/********************************************************/
    .zindex{
           /*display: flex;*/
        /*flex-direction: column;*/
        
        .zli { 
            display: flex;
            gap: 0.4rem;
            padding: 0.4rem; 
        }
        .zli:hover {
            background: #e0e0e0;
            border-radius: 0.6rem;
            cursor: pointer;
        }
        
        .zli.active{
            background: #e1e1e1;
            border-left: 2px solid #333;
            /*border-bottom: 1px solid #ccc;*/
        }

        .zli-A img{
            border: 0px  !important;
            display:block;
            background: white;
        }
        .zli-title{
            font-weight: bold;
            /*font-size: 1.1em;*/
            padding: 0.3rem 0px 0.4rem 0px;
        }
        .zli-subTxt{
            color:#404040;
            word-spacing: -0.3rem;
        }

        .zli-A9{display: none;}
    

        .zli-A{
            width:3rem;
            height: 3rem;
            border-radius: 2.5rem;
            overflow: hidden;
            display: flex;
            border: 1px solid #ccc;
            flex-shrink: 0;
        }

        
    }
    /****************************************************/
    /*                                                  */
    /****************************************************/
    #zlsDiv.zls-post {
        .zli {
            margin: 1rem;
             border: 1px solid var(--border-color); 
            margin-right: 10%;
            border-radius: 0;
            display: flex;
            flex-direction: column-reverse;
        }
        
        .zli-B0, .zli-cmenu,  .zli-title{
            display:block; 
        }
        .zli-title {
            margin:0px;
            padding:0px; 
        }
        .zli-subTxt{
            text-align: left;
        }

    }

    /****************************************************/
    /*                                                  */
    /****************************************************/
    #zlsDiv.zls-msg {
        .zli {
            margin: 1rem;
            border: 1px solid var(--border-color);
            margin-right: 10%;
            border-radius: 0.6rem 1rem 1rem 1rem;
        }
        .zli:hover {
            /*background: none; */
            border: 1px solid #283593;
        }

        
        .zli-subTxt{ text-align: right; }

        .zli-B0, .zli-cmenu,  .zli-title{
            display:none 
        }


        

        
    }
    #zlsDiv  {  
        
        /*display: flex;*/
        /*flex-direction: column;*/
        .zli { 
            border: 1px solid transparent;
            padding: 0.6rem 0.8rem 
        }
        .zli:hover {
            background: #eee;
            border: 1px solid #c1c1c1;
        }
        /*.zli-A0{
            
        }*/
        .zli-A img{
            border: 1px solid #ccc;
            display:block;
        }

        .zli-title{
            font-weight: bold;
            /*font-size: 1.1em;*/
            padding: 0.3rem 0px 0.4rem 0px;
        }
        .zli-subTxt{
            color:#404040;
            word-spacing: -0.3rem;
        }
        .zli.active{
            background: #eee;
            border-left: 2px solid #333;
            /*border-bottom: 1px solid #ccc;*/
        }
        /* .zli-A0.watched {
           opacity: 0.6; 
        }*/
        .zli-A9{display: none;}
    }


    

    #zlsDiv.ls-default,   .zls-default{
        .zli{
            display: flex;
            gap: 0.4rem;
        }
        .zli-A{
            width:2.5rem;
            height: 2.5rem;
            border-radius: 0.2rem;
            overflow: hidden;
            display: flex;

        }
        
    }
    #zlsDiv.ls-vid, .zls-vid{
        .zli{
            display: flex;
            gap: 0.4rem;
        }
        .zli-A{
            width:40%;
            display: flex;
            min-width: 40%;
            flex-grow: 0;

        }
        
    }

    #zlsDiv.ls-album, .zls-album, .zls-music{
        .zli{
            display: flex;
            padding: 0.6rem 0rem;
            
        }
        
        .zli-A{
            width:40%;
            display: flex;
            flex-shrink: 0;
            margin: 0 0.6rem;

        }
        .zli-A img{
             height: fit-content;;
        }
        
    }

    #zlsDiv.ls-product, .zls-product{
        line-height: 1.1rem;
        .zli {
            padding: 0.6rem;
            display: flex;
            gap: 0.6rem;
        }
        .zli-A img{
        
            
            border: 1px solid #ccc;
            padding: 1rem;
        }
        .zli-title{
            padding:0;
            display: -webkit-inline-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 3;
            /* line-height: 1.5; */
            max-height: 4em;
        }
        .zli-A {
            border: 0px;
            background: white;
            width: 34%;
            flex-shrink: 1;
            flex-grow: 0;
            min-width: 34%;
            aspect-ratio: 1;
            height: fit-content;
            overflow: hidden;
        }
        .action-qty {
            display: flex;
            background: #444;
            
            width: fit-content;
            border-radius: 1rem;
            padding: 0rem 0.4rem;
            gap: 0.4rem;
            color: white;
            font-weight: bold;
            align-items: center;
            
            margin: 0.2rem 0 0.2rem auto;
                
        }.action-qty > *{
            padding: 0.3rem 0.6rem;
        }
        .action-qty-num{
            background: #ffffffdf;
            
            color: #444444;
        }
        

        
        

        .action-qty-rm, .action-qty-num{
            
            display: none;
        }
         
        .action-qty.active > .action-qty-rm, 
        .action-qty.active > .action-qty-num{
            display: block;
        }
    }
   
/********************************************/
/*  ls-img                                  */
/********************************************/
#zlsDiv.img2, #zlsDiv.img3, #zlsDiv.img4 {
    display: flex!important;
    
    flex-direction: row;
    flex-wrap: wrap;
    zli{
        flex-shrink:0;
        padding:0;
        border: none;
    }
    img{border: none;}
    .zli-B{
        display:none;
    }
 
    
 
    .zli:hover {
        position:relative;
        border: none;
        .zli-A::after{
            content:'';
            display:block;
            border:4px solid rgb(255 255 255 / 50%);
            position:absolute;
            top:0px;
            width:100%;
            height:100%;
            box-sizing:border-box;
        }
    }
    

}
#zlsDiv.img2 zli{width:50%;box-sizing: border-box;}
#zlsDiv.img3 zli{ width:33.33%;}
#zlsDiv.img4 zli{ width:25%;}

/***************************************/
/*  zls-Round grid   */
/***************************************/
#zlsDiv.zls-RG, .zls-RG{
           /*display: flex;*/
        /*flex-direction: column;*/
        
        .zli {
            display: inline-flex;
            gap: 0.4rem;
            padding: 0.6rem 0rem;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width:22%;
            overflow: hidden;
            margin-left:1% ;

        }

        .zli-cmenu{
         
            display:none;
         
        }
        .zli-A img{
            border: 0px  !important;
            display:block;
            background: white;
        }
        .zli-title{
            font-weight: bold;
            font-size: 0.7rem;  /*desktop mode use 0.8rem */
            padding: 0px;
            word-break: break-word;
        }
        .zli-subTxt{
            display:none;
        }

        .zli-A9{display: none;}
    

        .zli-A{
            width:3.5rem;
            height: 3.5rem;
            border-radius: 2.5rem;
            overflow: hidden;
            display: flex;
            border: 1px solid #ccc;
            flex-shrink: 0;
        }

        
    }