/*POSITION SPACING*/
body{
    padding-top:80px;
    padding-right:10px;
    padding-left:10px;
    padding-bottom:80px;
    background-color:#1B1F23;
}

a{
    text-decoration: none;
}

.visually-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
    
/*HEADER*/
.header{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    height:80px;
    width:100%;
    z-index:1;
    background-color:#D1015F;
}

.h1{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content: center;
    width: 20%;
    max-width: 100px;
}
.eb-logo{
    height:50px;
}
.h2{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    min-width: 210px;
    flex:1;
    font-family:Impact; 
}
.title{
    color:whitesmoke;
    font-size:40px;
    margin:2px;
    margin-bottom:1px;
}
.sub-title{
    color:whitesmoke;
    font-size:16px;
    margin:2px;
    margin-top:1px;
}
.h3{
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content: center;
    width: 20%;
    max-width: 100px;
}
.pro-pic-div{
    position: relative;
}
.pro-pic-icon{
    height:50px;
    border-radius:25px;
}
.pro-pic-icon:hover{
    cursor:pointer;
}
.pro-pic-div{
    position: relative;
}
.notification-dot {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border: 2px solid whitesmoke; /* optional, makes dot stand out */
  border-radius: 50%;
}
.numofnot {
    color:#D1015F;
    font-weight: bolder;
}

/*BODY*/
/*User Info*/
.user-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: impact;
}
.pro-pic-badge-div{
    position: relative;
}
.title-pro-pic{
    height:94px;
    border-radius:48px;
}
.badge{
    position: absolute;
    height: 43px;
    bottom: 0;
    right: 0;
}
.title-username{
    margin:1px;
    font-size:19px;
    color:#5C8DAE;
    font-family: impact;
}
.sum-logs{
    margin:1px;
    font-size:16px;
    color:#5C8DAE;
    font-family: arial narrow;
    font-weight: bold;
    font-style:italic;
}

/*Setlist Grids*/
.section-title{
    font-family:Impact; 
    color:whitesmoke;
    font-size:18px;
    margin-top:8px;
    margin-bottom:10px;
}

.setlist-grid{
    display:flex;
    flex-direction: row;
    width:100%;
    overflow-x:auto;
    margin-bottom:20px;
}
.setlist-grid::-webkit-scrollbar{
    background-color: transparent;
    height:1px;
}
.setlist-thumbnail{
    display:grid;
    grid-template-columns: 100px 185px;
}
.poster-log{
    width:100%;
    height: 125px;
}
.poster-log:hover{
    cursor: pointer;
}
.poster-fave-div{
    position: relative;
}
/* .poster-log-fave{
    width:100%;
    height: 120px;
    border:#D1015F;
    border-width: 2px;
    border-color: #D1015F;
    border-style: solid;
}
.poster-log-fave:hover{
    cursor: pointer;
} */
.fave-icon{
    height:22%;
    position:absolute; 
    top:0;
    left:0;
}
.poster-game{
    width:100%;
    height: 125px;
}
.poster-game:hover{
    cursor: pointer;
}
.thumbnail-content{
    font-family:arial narrow;
    margin-left:5px;
}
.artist{
    font-weight:bolder;
    font-size:18px;
    margin:5px;
    margin-top:1px;
    color:whitesmoke;
}
.venue{
    font-size:15px;
    margin:5px;
    color:whitesmoke;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}
.city{
    margin:5px;
    font-size:13px;
    color:whitesmoke;
}
.date{
    margin:5px;
    font-size:13px;
    color:whitesmoke;
}
.user-grid{
    display:flex;
    align-items:center;
    margin-left:5px;
    margin-top:9px;
}
.user-icon{
    height:25px;
    border-radius:20px;
    border-color:white;
    border-width: 2px;
}
.user-name{
    font-size:10px;
    margin:3px;
    margin-bottom:0px;
    color:#5C8DAE;
    font-weight: bold;
}
.user-score{
    font-size:10px;
    margin:3px;
    color:#5C8DAE;
    font-style:italic;
    font-weight:bold;
}
.user-rating{
    height:10px;
    margin:2px;
    margin-top:0px;
}
.user-review-icon{
    height:18px;
    margin:3px;
    margin-left:8px;
}
.user-review-icon:hover{
    cursor: pointer;
}

/*REVIEW POPUP*/
.review-popup{
    position:fixed;
    display: none; /*block*/
    max-width:90%;
    width: 500px;
    min-height:290px;
    height:auto;
    left:50%;
    transform:translate(-50%);
    top:27%;
    font-family:impact;
    background-color:rgb(162, 161, 161);
    border-style:solid;
    border-width:3px;
    align-items: center;
    justify-content: center;
}
.review-text{
    padding:20px;
    font-family: arial narrow;
    font-style:italic;
    color:#1B1F23;
    font-weight: 600;
}
.interactive-section{
    display: flex;
    direction: row;
    justify-content: space-between;
    margin-top:22px;
}
.p-title{
    text-align: center;
    font-size:24px;
    color:#1B1F23;
}
.p-button{
    width: 150px;
    height: 38px;
    background-color: #D1015F;
    color:#f5f5f5;
    font-size: 15px;
    font-family: impact;
}
.p-button:hover{
    cursor: pointer;
}

/*FRIEND SECTION*/
.friend-grid{
    display:flex;
    flex-direction: row;
    width:100%;
    overflow-x:auto;
    margin-bottom:15px;
    align-items:center;
    gap:50px;
}

.friend-grid::-webkit-scrollbar{
    background-color: transparent;
    height:1px;
}

.friend-thumbnail{
    display:flex;
    flex-direction: column;
    width:100px;
    align-items:center;
}

.friend-icon{
    width:85px;
    border-radius:50%;
}

.friend-icon:hover{
    cursor: pointer;
}

.friend-username{
    font-size:14px;
    color:#5C8DAE;
    font-weight: bold;
    font-family:arial narrow;
    margin-top:8px;
}
/*Follow Button*/
.follow-button{
    width:80px;
    height:30px;
    margin-top:5px;
    font-family:arial narrow;
    font-size:14px;
    font-weight: bold;
    color:rgb(2, 112, 2);
    background-color: whitesmoke;
    border-style:solid;
    border-width:2px;
    border-color:rgb(2, 112, 2);
}
.follow-button:hover{
    cursor:pointer;
}
.follow-button-2{
    width:80px;
    height:30px;
    margin-top:5px;
    font-family:arial narrow;
    font-size:14px;
    font-weight: bold;
    color:whitesmoke;
    background-color: rgb(2, 112, 2);;
    border-style:solid;
    border-width:2px;
    border-color:whitesmoke;
}
.follow-button-2:hover{
    cursor:pointer;
}

/*EMAIL LINK*/
.email-box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:1px;
}

.email-line{
    font-size:12px;
    color:whitesmoke;
    font-style: italic;
    font-family: arial narrow;
    margin:1px;
    text-align: center;
}

.email-link{
    color:#5C8DAE;
    text-decoration: underline;
}

#loading-spinner {
    display: none;
    border: 4px solid #f3f3f3; /* light gray */
    border-top: 4px solid #3498db; /* blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.no-notifs{
    display:flex;
    font-family:Impact; 
    color:whitesmoke;
    font-size:16px;
    height: 25px;
    max-width: 95%;
    width: 495px;
    font-style: italic;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*FOOTER*/
.footer{
    display:flex;
    flex-direction:row;
    position:fixed;
    justify-content: center;
    background-color:#5C8DAE; 
    bottom:0px;
    left:0px;
    right:0px;
    height:80px;
    z-index:1;
}
.f1{
    flex:1;
}
.f2{
    display:flex;
    align-items:center;
    justify-content: space-between;
    width:240px;
}
.f2 img{
    height:50px;
}
.f3{
    flex:1;
}
.play-screen-logo:hover{
    cursor: pointer;
}
.home-screen-logo:hover{
    cursor: pointer;
}
.user-screen-logo:hover{
    cursor: pointer;
}

/*POPUP*/
.popup{
    position:fixed;
    display: none;
    flex-direction: column;
    gap:3px;
    z-index:2;
    width:100px;
    height:75px;
    right:20px;
    top:60px;
    font-family:arial narrow;
    font-size:14px;
    background-color: whitesmoke;
    border-style:solid;
    border-width:1px;
    border-color:#5C8DAE;
}
.popup-text{
    margin:3px;
    border-bottom:1px solid #1B1F23;
    color:#1B1F23;
}

/* --- MOBILE OPTIMIZATION --- */

@media (max-width: 500px) {
    .header {
        height: 70px;
    }

    .title {
        font-size: 30px; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        max-width: 90%;
    }

    .sub-title {
        font-size: 14px; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
    }

    .title-pro-pic{
        height:90px;
        border-radius:45px;
    }
    .title-username{
        font-size:17px;
    }
    .sum-logs{
        font-size:14px;
    }

    .section-title{
        margin-top:6px;
        margin-bottom:10px;
    }

    .setlist-grid{
        margin-bottom:5px;
    }
}

@media (max-width: 350px) {

    .h2{ 
        min-width: 150px;
    }

  .title {
        font-size: 30px;
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        max-width: 90%;
  }
    .sub-title {
        font-size: 12px;
    }
    .eb-logo{
        height:40px;
    }
    .pro-pic-icon{
        height:40px;
        border-radius:20px;
    }

    .h2{ 
        min-width: 150px;
    }

    .setlist-thumbnail{
        grid-template-columns: 95px 160px;
    }
    .artist{
        font-size:17px;
    }
    .poster-log{
        height: 120px;
    }
    .poster-game{
        height: 120px;
    }
    .footer{
        height:70px;
    }

}

@media (max-height: 500px) {
    .review-popup{
        min-height: 120px;
    }
    .review-text{
        padding:10px;
        margin-top:1px;
        margin-bottom:2px;
        font-size: 12px;
    }
    .interactive-section{
        margin:1px;
    }
    .p-title{
        font-size:20px;
        margin-top:10px;
        margin-bottom:2px
    }
    .p-button{
        height: 30px;
        margin:0px;
    }   
}