/* Title */

.main-title{
    color: #fff;
    text-align: center;
    padding: 14px;
    font-size: 20px;
    font-weight: 700;
    border-top: 1px solid #474444;
    background: url(./Clipstar-Designers.jpg) repeat;
    background-size: contain;
}

/* Tabs */

.tabs{
    display:flex;
    padding:0;
    background:#f8fafc;
    border-bottom:2px solid #e2e8f0;
    
}

.tab-btz{
    flex:1;
    border:none;
    background: white;
    color: #d8116a;
    padding:16px 8px;
    font-size:14px;
    font-weight:700;
    position:relative;
    transition:.3s;
    box-shadow: 0 1px 5px rgb(3 3 3 / 64%);
    margin-bottom: -25px;
}

.tab-btz:hover{
    background:#f1f5f9;
    color:#0f172a;
}

.tab-btz.active{
    background:#ffffff;
    color:#2563eb;
}

.tab-btz.active::after{
    content:'';

    position:absolute;

    bottom:0;
    right:0;
    left:0;  
}



.tab-btz.active{
    background:#ffffff;
    color:#000;

    animation:vipGlow 2s infinite;
}

@keyframes vipGlow{

    0%,100%{
        background:#ffe7029e;
        box-shadow:0 0 0 rgba(212,175,55,0);
    }

    50%{
        background:#ffc505;
        box-shadow:
            0 0 12px rgb(213 12 12 / 70%),
            0 0 25px rgb(234 226 14 / 40%);
    }
}

/* Content */

.day-content{

  display:none;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:2px;
     padding-top:25px;
}

.day-content.active{
    display:grid;
}

@keyframes showContent{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

/* Cards */

 

.card::before{

    content:'';

    position:absolute;

    top:0;
    right:0;

    width:5px;
    height:100%;

    background:
    linear-gradient(
    180deg,
    #14d9ff,
    #6f6bff
    );
}

.card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 45px rgba(0,0,0,.12);
}

/* Title */

.title{

    color:#1f2937;

    font-size:17px;

    font-weight:700;

    line-height:2;

    margin-bottom:15px;

    text-align:right;
}

/* Status */

.card{
    background:#fff;
    padding:10px 14px;
    position:relative;
    overflow:hidden;
    border:none;
    text-align:right;
    transition:.35s;
    margin:0;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.status{

    position:absolute;

    top:8px;

    left:8px;

    padding:4px 10px;

    border-radius:20px;

    background:#eefbff;

    color:#0891b2;

    border:1px solid #c8f1fb;

    font-size:10px;

    font-weight:700;

    line-height:1.2;

    z-index:2;
}

/* Mobile */

@media(max-width:768px){
    
      .card{
        padding:5px 7px;
        border-radius:8px;
         height: 30px;
    }

  .status{

        position:absolute;

        top:8px;

        left:8px;

        padding:3px 10px;

        border-radius:20px;

        background:#eefbff;

        color:#0891b2;

        border:1px solid #c8f1fb;

        font-size:10px;

        font-weight:700;

        line-height:1.2;

        z-index:2;
    }

    .title{
        font-size:13px;
        line-height:1.4;
    }
    

    .main-title{
        font-size:14px;
        padding:8px;
    }

    .tab-btz{
          width:auto;
          min-width:50px;
          padding: 10px 6px;
          font-size:11px;
          margin-bottom: -25px;
    }

    .day-content.active{
        grid-template-columns:1fr;
    }

}