@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

:root {
    /* Primary Colors */
    --primary-color: #01AEF0;
    --primary-light: #01AEF01A;

    /* Text Colors */
    --text-primary: #242529;
    --text-secondary: #8996A3;

    /* Background Colors */
    --bg-primary: #F6F7F8;
    --bg-secondary: #FFFFFF;
    --bg-secondary-inverted: #000000;
    --bg-tertiary: #8996A31A;
    --bg-placeholder: #ccc;
    /* --bg-dark: #000000; */

    /* Border Color */
    --border-main-color: #E1E5E8;
    --border-color: #E4E8EA;

    /* Status Indicators */
    --status-active: #15DA33;
    --status-away: #FBBC04;
    --status-offline: #8996A3;

    /* Overlay Colors */
    --overlay-primary: rgba(0, 0, 0, 0.4);
    --overlay-secondary: rgba(0, 0, 0, 0.5);

    /* Special Colors */
    --badge-premium: #6A0DADBF;

    /* Typography */
    /* --font-size: 15px; */

    /* Primary Filter (for SVG icons) */
    --primary-filter: brightness(0) saturate(100%) invert(48%) sepia(94%) saturate(1566%) hue-rotate(171deg);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background: var(--bg-secondary);
}

a,
button,
*[onclick] {
    cursor: pointer;
}

.popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  justify-content: center;
  align-items: center;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 375px;
  /* height: 100%; */
  max-width: calc(100vw - 55px);
  /* max-height: calc(100svh - 55px); */
  border-radius: 6px;
  /* overflow: hidden; */

  .popup-container {
    background: var(--border-color);
    width: 100%;
    /* height: 100%; */
    border-radius: 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: scroll;
    max-height: calc(100svh - 55px);

    > div,
    > .section {
        background-color: var(--bg-secondary);
    }

    > .section {
        display: flex;
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .close-btn-section {
      padding: 20px;
      display: flex;
      justify-content: end;

      a {
        font-family: Roboto;
        font-weight: 500;
        font-style: Medium;
        font-size: 15px;
        line-height: 140%;
        letter-spacing: 0%;
        vertical-align: middle;
        text-transform: uppercase;
        color: var(--primary-color);
      }
    }
	  
	overflow-y: scroll;
	  scrollbar-width: none;
	  -ms-overflow-style: none;
	  &::-webkit-scrollbar {
		display: none;
	  }
  }
}

.mobile-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var( --border-main-color );
	position: sticky;
	top: 0;
	background: var(--bg-secondary);
	z-index: 198;

    display: none;

    .menu-toggle {
        background: var(--bg-secondary);
        cursor: pointer;
        font-size: 24px;
        border: none;
        display: flex;
    }
}

/* Desktop Layout */
.wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

aside {
    padding: 20px 0;
}

body:has(.popup-menu[style="display: flex;"]) {
    overflow: hidden !important;
    .right-sidebar, main {
        z-index: -1;
    }
}

body:has(.popup[style="display: flex;"]),
body:has(.f4u-video-lightbox.active),
body:has(.f4u-lightbox.active) {
    .right-sidebar {
        z-index: -1;
    }

    .mobile-header {
        position: relative;
        z-index: 0;
    }
}

/* Left Sidebar - Desktop */
.left-sidebar {
  width: 320px;
  background: var(--bg-secondary);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;

  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }

  display: flex;
  flex-direction: column;
  
  ul {
      
      display: flex;
      flex-direction: column;
      gap: 10px;
      list-style: none;
      
      li {
          
          padding: 16px 20px;
          
          &:has(a.login) {
              padding: 15px 10px;
            }
            
            a {
                display: flex;
                align-items: center;
                justify-content: start;
                gap: 10px;
                
                text-decoration: none;
                font-style: normal;
                font-weight: 500;
                font-size: 16px;
                line-height: 140%;
                color: var(--text-secondary);
                transition: all 400ms ease;
                
                svg {
                    transition: all 400ms ease;
                }
                
                &.login, &:hover, &.active {
                    color: var(--primary-color);
                    
                    svg {
                        filter: var(--primary-filter);
                    }
                }
                
            }
        }
    }
    
    .close-menu {
        border: none;
        cursor: pointer;
        text-transform: uppercase;
        display: none;
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        line-height: 140%;
        text-transform: uppercase;
        color: var(--primary-color);
        background: var(--bg-secondary);
        padding: 20px;
        margin-left: auto;
        margin-top: auto;
    }
    
    .popup-menu {
        /* position: relative; */
        position: absolute;
        width: 100%;
        inset: unset;
        left: 0;
        top: 190px;
        height: auto;
        align-items: start;
        transform: unset;

        .popup-container {
            width: 100%;
            padding: 0;

            .popup-header {
                display: flex;
                justify-content: end;
                padding: 15px 20px;
            }

            ul.menu {
                list-style: none;
                padding: 20px;
                display: flex;
                flex-direction: column;
                gap: 20px;
                background: var(--bg-secondary);

                li {
                    padding: 0;
                    font-weight: 500;
                    font-style: Medium;
                    font-size: 15px;
                    leading-trim: NONE;
                    line-height: 140%;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    a {
                        display: flex;
                        gap: 10px;
                    }
                }
            }
        }
    }
}

/* Main Content */
main {
  width: 100%;
  max-width: 600px;
  min-height: 100vh;
  border-width: 0px 1px 0px 1px;
  border-style: solid;
  border-color: var( --border-main-color );
  display: flex;
  flex-direction: column;

  h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 15px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0;
    padding: 20px;
    color: var(--text-secondary);
  }

  .profile-listing {
    .profile-cover-img {
        aspect-ratio: 600/257;
        /* background-image: url(/assets/images/profile-cover-1.jpg); */
        background-position: center center;
        background-size: cover;
        width: 100%;
        height: auto;
        z-index: -2;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background: #000;
            opacity: 10%;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .info-wrap {
            padding: 20px;
            display: flex;
            gap: 20px;
            display: none;

            .back {
                width: 20px;
            }

            .metadata {
                display: flex;
                flex-direction: column;
                gap: 5px;
                .profile-name {
                    font-style: normal;
                    font-weight: 500;
                    font-size: 15px;
                    line-height: 140%;
                    display: flex;
                    align-items: center;
                    color: #fff;
                    gap: 5px;
                }

                .media-info {
                    display: flex;
                    flex-direction: row;
                    gap: 23px;
                    .info-item {
                        font-style: normal;
                        font-weight: 500;
                        font-size: 12px;
                        line-height: 140%;
                        color: #fff;
                        display: flex;
                        gap: 5px;
                        position: relative;

                        &::after {
                            content: '';
                            width: 3px;
                            height: 3px;
                            border-radius: 100%;
                            position: absolute;
                            top: 50%;
                            right: -11.5px;
                            transform: translateY(-50%);
                            background: var(--bg-secondary);

                        }
                        &:nth-last-of-type(1)::after {
                            display: none;
                        }
                    }
                }
            }
        }
    }
  }

  .post-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    .header {
        display: flex;
        flex-direction: column;
        gap: 10px;
        .avatar {
            width: 150px; /* 110 */
            height: 60px; /* 60 */
            border-radius: 100%;
            position: relative;
            z-index: -1;

            img {
                width: 150px; /* 110 */
                height: 150px; /* 110 */
                border-radius: 100%;
                border: 1.5px solid var(--bg-secondary);
                position: absolute;
                top: -90px;
                object-fit: cover;
            }

            .online-status {
                width: 14px;
                height: 14px;
                border: 1.5px solid var(--bg-secondary);
                position: absolute;
                right: 15px; /* 10 */
                bottom: 15px; /* 10 */
                border-radius: 100%;
                &.active {background-color: var(--status-active);}
                &.away {background-color: var(--status-away);}
                &.offline {background-color: var(--status-offline);}
            }
        }
		
        .info {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .username {
                font-style: normal;
                font-weight: 500;
                font-size: 15px;
                line-height: 140%;
                display: flex;
                align-items: center;
                color: var(--text-primary);
                display: flex;
                gap: 5px;

                a.send-tip {
                    margin-left: auto;
                    text-decoration: none;
                    display: flex;
                    align-items: center;
                    gap: 5px;

                    font-weight: 500;
                    font-style: Medium;
                    font-size: 15px;
                    leading-trim: NONE;
                    line-height: 140%;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    text-transform: uppercase;
                    color: var(--text-secondary);
                }
            }

            .addn-info {
                display: flex;
                gap: 23px;
                .info {
                    font-weight: 400;
                    font-style: Regular;
                    font-size: 12px;
                    leading-trim: NONE;
                    line-height: 140%;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    color: var(--text-secondary);
                    position: relative;
                    z-index: -1;

                    &::after {
                        position: absolute;
                        content: '';
                        width: 3px;
                        height: 3px;
                        border-radius: 100%;
                        position: absolute;
                        top: 50%;
                        right: -11.5px;
                        transform: translateY(-50%);
                        background: var(--text-secondary);
                    }

                    &:nth-last-of-type(1)::after {
                        display: none;
                    }
                }
            }

            .media-info {
                display: flex;
                gap: 10px;
                
                .info-item {
                    font-weight: 500;
                    font-style: Medium;
                    font-size: 12px;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    color: var(--text-secondary);
                    display: flex;
                    gap: 5px;
                    align-items: center;

                }
            }
        }
   } 

   .subscribe-btn {
        text-decoration: none;
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        line-height: 140%;
        color: var(--bg-secondary);
        display: flex;
        gap: 20px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: var(--primary-color);
        border-radius: 50px;
        padding: 10px 20px;

        &.message {
            text-transform: uppercase;
            justify-content: center !important;
        }
   }

   .description {
    display: flex;
    flex-direction: column;
    gap: 10px;
    p {
        font-weight: 400;
        font-style: Regular;
        font-size: 15px;
        line-height: 140%;
        color: var(--text-primary);
        position: relative;
        z-index: -1;
/*         max-height: 84px; */
        max-height: 47px;
        overflow: hidden;
        transition: all 600ms;

        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 47px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-secondary) 100%);
            bottom: 0;
            left: 0;
        }

        &.expanded {
            max-height: fit-content;

            &::after {
                display: none;
            }
        }
    }

    a.more-info {
        font-weight: 400;
        font-style: Regular;
        font-size: 15px;
        leading-trim: NONE;
        line-height: 140%;
        letter-spacing: 0%;
        vertical-align: middle;
        color: var(--primary-color);
        text-decoration: none;
    }
   }
  }
  
}

.loading-more, 
.loading,
.loading-more-photos {
  width: 10px;
  aspect-ratio: 1;
  background: var(--primary-color);
  box-shadow: 0 0 60px 15px var(--primary-color);
  transform: translate(-80px);
  clip-path: inset(0);
  margin: 30px auto 50px auto;
  animation:
    l4-1 0.5s ease-in-out infinite alternate,
    l4-2 1s   ease-in-out infinite;
}
@keyframes l4-1 {
  100% {transform: translateX(80px)}
}
@keyframes l4-2 {
   33% {clip-path: inset(0 0 0 -100px)}
   50% {clip-path: inset(0 0 0 0)     }
   83% {clip-path: inset(0 -100px 0 0)}
}

/* Right Sidebar - Desktop */
.right-sidebar {
  width: 320px;
  background: var(--bg-secondary);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 0;

  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }

  .suggested-profiles {
    display: flex;
    flex-direction: column;
    gap: 10px;

        .suggested-profile {
            aspect-ratio: 300/157;
            border-radius: 6px;
            background: var(--bg-placeholder);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            /* background-image: url(/assets/images/suggested-profile-cover.jpg); */
            background-position: center center;
            background-size: cover;
            .badge {
                margin: 10px;
                font-weight: 500;
                font-style: Medium;
                font-size: 12px;
                leading-trim: NONE;
                line-height: 100%;
                letter-spacing: 0%;
                vertical-align: middle;
                color: #fff;
                background: #8996A380;
                padding: 5px 10px;
                border-radius: 25px;
                width: fit-content;
                &.free {
                    backdrop-filter: blur(10px);
                }
                &.premium {
                    background: var(--badge-premium);
                    backdrop-filter: blur(15px);
                    &::before {
                        margin-right: 5px;
                        content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjA0MjMgMy4wNDQzM0MxMy4wNDI1IDIuODA2MDIgMTIuOTg2NyAyLjU3MDk5IDEyLjg3OTUgMi4zNTgxOEMxMi43NzIyIDIuMTQ1MzcgMTIuNjE2NSAxLjk2MDczIDEyLjQyNDggMS44MTkxNEMxMi4yMzMxIDEuNjc3NTQgMTIuMDEwOCAxLjU4Mjk1IDExLjc3NTkgMS41NDI5OUMxMS41NDEgMS41MDMwMyAxMS4yOTk5IDEuNTE4OCAxMS4wNzIyIDEuNTg5MDVDMTAuODQ0NSAxLjY1OTMgMTAuNjM2NSAxLjc4MjA2IDEwLjQ2NDkgMS45NDc0M0MxMC4yOTMzIDIuMTEyODEgMTAuMTYyOSAyLjMxNjE3IDEwLjA4NDMgMi41NDExNUMxMC4wMDU3IDIuNzY2MTIgOS45ODEwNyAzLjAwNjQxIDEwLjAxMjMgMy4yNDI2NkMxMC4wNDM2IDMuNDc4OTEgMTAuMTI5OSAzLjcwNDUxIDEwLjI2NDQgMy45MDEyOUw4LjgwODU3IDUuNjk0NTVMNy40OTk0OSAyLjY4NTY3QzcuNzM4MjQgMi40ODQ3MyA3LjkwOTQzIDIuMjE1MjMgNy45ODk4NiAxLjkxMzcyQzguMDcwMjkgMS42MTIyIDguMDU2MDcgMS4yOTMyNSA3Ljk0OTEyIDEuMDAwMDlDNy44NDIxNyAwLjcwNjkyNiA3LjY0NzY3IDAuNDUzNzQgNy4zOTE5OCAwLjI3NDg0NUM3LjEzNjI5IDAuMDk1OTUwMyA2LjgzMTc3IDAgNi41MTk3MSAwQzYuMjA3NjUgMCA1LjkwMzE0IDAuMDk1OTUwMyA1LjY0NzQ1IDAuMjc0ODQ1QzUuMzkxNzYgMC40NTM3NCA1LjE5NzI2IDAuNzA2OTI2IDUuMDkwMzEgMS4wMDAwOUM0Ljk4MzM2IDEuMjkzMjUgNC45NjkxNCAxLjYxMjIgNS4wNDk1NyAxLjkxMzcyQzUuMTMgMi4yMTUyMyA1LjMwMTE5IDIuNDg0NzMgNS41Mzk5NCAyLjY4NTY3TDQuMjM0MTIgNS42OTI5MkwyLjc3ODMyIDMuODk5NjZDMi45NjUzMyAzLjYyNTY0IDMuMDU3NjYgMy4yOTgwMSAzLjA0MTI1IDIuOTY2NjZDMy4wMjQ4MyAyLjYzNTMyIDIuOTAwNTggMi4zMTg0MiAyLjY4NzQgMi4wNjQyMkMyLjQ3NDIyIDEuODEwMDMgMi4xODM4MSAxLjYzMjQ3IDEuODYwMzkgMS41NTg2QzEuNTM2OTcgMS40ODQ3MiAxLjE5ODI3IDEuNTE4NTcgMC44OTU4NjMgMS42NTQ5OUMwLjU5MzQ2MSAxLjc5MTQxIDAuMzQzOTMxIDIuMDIyOTMgMC4xODUyNzcgMi4zMTQyOUMwLjAyNjYyMjcgMi42MDU2NCAtMC4wMzI0NjA4IDIuOTQwODcgMC4wMTcwMjQ1IDMuMjY4OTFDMC4wNjY1MDk4IDMuNTk2OTQgMC4yMjE4NTIgMy44OTk4MiAwLjQ1OTM5MyA0LjEzMTQxQzAuNjk2OTMzIDQuMzYzIDEuMDAzNjYgNC41MTA2IDEuMzMyODQgNC41NTE3NUwyLjExOTcgOS4yNzM0NkMyLjE1MzUzIDkuNDc2NDYgMi4yNTgyNyA5LjY2MDg3IDIuNDE1MjggOS43OTM5MUMyLjU3MjMgOS45MjY5NCAyLjc3MTQxIDkuOTk5OTcgMi45NzcyMSAxMEgxMC4wNjU1QzEwLjI3MTMgOS45OTk5NyAxMC40NzA0IDkuOTI2OTQgMTAuNjI3NCA5Ljc5MzkxQzEwLjc4NDQgOS42NjA4NyAxMC44ODkyIDkuNDc2NDYgMTAuOTIzIDkuMjczNDZMMTEuNzA5MyA0LjU1MzkyQzEyLjA3NzMgNC41MDc5NyAxMi40MTU4IDQuMzI5MiAxMi42NjEzIDQuMDUxMjFDMTIuOTA2NyAzLjc3MzIzIDEzLjA0MjIgMy40MTUxNyAxMy4wNDIzIDMuMDQ0MzNaTTYuNTIxMzQgMC44NzA2NzdDNi42NTAzMiAwLjg3MDY3NyA2Ljc3NjM5IDAuOTA4OTIxIDYuODgzNjMgMC45ODA1NzRDNi45OTA4NiAxLjA1MjIzIDcuMDc0NDQgMS4xNTQwNyA3LjEyMzggMS4yNzMyM0M3LjE3MzE2IDEuMzkyMzggNy4xODYwNyAxLjUyMzQ5IDcuMTYwOTEgMS42NDk5OUM3LjEzNTc1IDEuNzc2NDggNy4wNzM2NCAxLjg5MjY3IDYuOTgyNDQgMS45ODM4N0M2Ljg5MTI1IDIuMDc1MDcgNi43NzUwNSAyLjEzNzE3IDYuNjQ4NTYgMi4xNjIzNEM2LjUyMjA3IDIuMTg3NSA2LjM5MDk1IDIuMTc0NTggNi4yNzE4IDIuMTI1MjNDNi4xNTI2NCAyLjA3NTg3IDYuMDUwOCAxLjk5MjI5IDUuOTc5MTUgMS44ODUwNkM1LjkwNzQ5IDEuNzc3ODIgNS44NjkyNSAxLjY1MTc0IDUuODY5MjUgMS41MjI3N0M1Ljg2OTI1IDEuMzQ5ODIgNS45Mzc5NSAxLjE4Mzk2IDYuMDYwMjQgMS4wNjE2N0M2LjE4MjUzIDAuOTM5Mzc5IDYuMzQ4NCAwLjg3MDY3NyA2LjUyMTM0IDAuODcwNjc3Wk0wLjg2OTg1NyAzLjA0NDMzQzAuODY5ODU3IDIuOTE1MzUgMC45MDgxMDIgMi43ODkyOCAwLjk3OTc1NSAyLjY4MjA0QzEuMDUxNDEgMi41NzQ4IDEuMTUzMjUgMi40OTEyMiAxLjI3MjQxIDIuNDQxODdDMS4zOTE1NiAyLjM5MjUxIDEuNTIyNjggMi4zNzk2IDEuNjQ5MTcgMi40MDQ3NkMxLjc3NTY2IDIuNDI5OTIgMS44OTE4NiAyLjQ5MjAzIDEuOTgzMDUgMi41ODMyMkMyLjA3NDI1IDIuNjc0NDIgMi4xMzYzNiAyLjc5MDYxIDIuMTYxNTIgMi45MTcxMUMyLjE4NjY4IDMuMDQzNiAyLjE3Mzc2IDMuMTc0NzIgMi4xMjQ0MSAzLjI5Mzg3QzIuMDc1MDUgMy40MTMwMyAxLjk5MTQ3IDMuNTE0ODcgMS44ODQyNCAzLjU4NjUyQzEuNzc3IDMuNjU4MTggMS42NTA5MiAzLjY5NjQyIDEuNTIxOTUgMy42OTY0MkMxLjM0OTAxIDMuNjk2NDIgMS4xODMxNCAzLjYyNzcyIDEuMDYwODUgMy41MDU0M0MwLjkzODU2IDMuMzgzMTMgMC44Njk4NTcgMy4yMTcyNyAwLjg2OTg1NyAzLjA0NDMzWk0xMC4wNjU1IDkuMTMwNTRIMi45NzcyMUwyLjIyMDc4IDQuNTk0MTRMNC4wMTAyNCA2Ljc5Mzg3QzQuMDUwNzcgNi44NDQ0OSA0LjEwMjExIDYuODg1NCA0LjE2MDUgNi45MTM2MUM0LjIxODg5IDYuOTQxODIgNC4yODI4NSA2Ljk1NjYxIDQuMzQ3NjkgNi45NTY4OUM0LjM2NzMyIDYuOTU2OTggNC4zODY5MyA2Ljk1NTcxIDQuNDA2MzggNi45NTMwOUM0LjQ4MDQ0IDYuOTQzMDIgNC41NTA2NiA2LjkxNDAzIDQuNjEwMjUgNi44Njg5MUM0LjY2OTgzIDYuODIzNzkgNC43MTY3OCA2Ljc2NDA3IDQuNzQ2NTYgNi42OTU1MUw2LjMzODc2IDMuMDMyOTFDNi40NjAwMSAzLjA0ODEyIDYuNTgyNjggMy4wNDgxMiA2LjcwMzkzIDMuMDMyOTFMOC4yOTYxMyA2LjY5NTUxQzguMzI1OSA2Ljc2NDA3IDguMzcyODUgNi44MjM3OSA4LjQzMjQ0IDYuODY4OTFDOC40OTIwMyA2LjkxNDAzIDguNTYyMjQgNi45NDMwMiA4LjYzNjMgNi45NTMwOUM4LjY1NTc2IDYuOTU1NzEgOC42NzUzNiA2Ljk1Njk4IDguNjk0OTkgNi45NTY4OUM4Ljc1OTg0IDYuOTU2NjEgOC44MjM4IDYuOTQxODIgOC44ODIxOSA2LjkxMzYxQzguOTQwNTggNi44ODU0IDguOTkxOTIgNi44NDQ0OSA5LjAzMjQ1IDYuNzkzODdMMTAuODIxOSA0LjU5MTk2TDEwLjA2NTUgOS4xMzA1NFpNMTEuNTIwNyAzLjY5NjQyQzExLjM5MTggMy42OTY0MiAxMS4yNjU3IDMuNjU4MTggMTEuMTU4NSAzLjU4NjUyQzExLjA1MTIgMy41MTQ4NyAxMC45Njc2IDMuNDEzMDMgMTAuOTE4MyAzLjI5Mzg3QzEwLjg2ODkgMy4xNzQ3MiAxMC44NTYgMy4wNDM2IDEwLjg4MTIgMi45MTcxMUMxMC45MDYzIDIuNzkwNjEgMTAuOTY4NCAyLjY3NDQyIDExLjA1OTYgMi41ODMyMkMxMS4xNTA4IDIuNDkyMDMgMTEuMjY3IDIuNDI5OTIgMTEuMzkzNSAyLjQwNDc2QzExLjUyIDIuMzc5NiAxMS42NTExIDIuMzkyNTEgMTEuNzcwMyAyLjQ0MTg3QzExLjg4OTQgMi40OTEyMiAxMS45OTEzIDIuNTc0OCAxMi4wNjI5IDIuNjgyMDRDMTIuMTM0NiAyLjc4OTI4IDEyLjE3MjggMi45MTUzNSAxMi4xNzI4IDMuMDQ0MzNDMTIuMTcyOCAzLjIxNzI3IDEyLjEwNDEgMy4zODMxMyAxMS45ODE4IDMuNTA1NDNDMTEuODU5NSAzLjYyNzcyIDExLjY5MzcgMy42OTY0MiAxMS41MjA3IDMuNjk2NDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
                    }
                }
            }
            
            .suggested-profile-info {
                padding: 10px;
                background: var(--overlay-primary);
                backdrop-filter: blur(10px);
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                align-items: center;
                .avatar {
                    width: 50px;
                    height: 50px;
                    position: relative;
                    img {
                        width: 50px;
                        height: 50px;
                        border-radius: 100%;
                        object-fit: cover;
                    }
                    .online-status {
                        width: 12px;
                        height: 12px;
                        position: absolute;
                        bottom: 1px;
                        right: 1px;
                        border: 1.29px solid var(--bg-secondary);
                        border-radius: 100%;
                        &.active {background-color: var(--status-active);}
                        &.away {background-color: var(--status-away);}
                        &.offline {background-color: var(--status-offline);}
                    }
                }
                .info {
                    width: calc (100% - 50px);
                    .profile-name {
                        font-weight: 500;
                        font-style: Medium;
                        font-size: 15px;
                        leading-trim: NONE;
                        line-height: 140%;
                        letter-spacing: 0%;
                        vertical-align: middle;
                        color: #fff;

                        display: flex;
                        gap: 5px;
                        align-items: center;
                    }
                    .username {
                        font-weight: 400;
                        font-style: Regular;
                        font-size: 12px;
                        leading-trim: NONE;
                        line-height: 140%;
                        letter-spacing: 0%;
                        vertical-align: middle;
                        color: #fff;
                    }
                }
            }
        }
    }

    .subscription-bundles {
        padding: 20px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        display: none;
        gap: 10px;
        flex-direction: column;

        &:has(.subscription-bundle) {
            display: flex;
        }

        .subscription-bundle {
            display: flex;
            flex-direction: column;
            gap: 5px;
            .supscripe-bundle {
                padding: 10px 20px;
                background-color: var(--primary-color);
                border-radius: 50px;
                font-family: Roboto;
                font-weight: 500;
                font-style: Medium;
                font-size: 15px;
                line-height: 140%;
                letter-spacing: 0%;
                vertical-align: middle;
                text-transform: uppercase;
                color: var(--bg-secondary);
                display: flex;
                gap: 10px;
                justify-content: space-between;
                text-decoration: none;
            }
            .bundle-profile-count {
                font-family: Roboto;
                font-weight: 400;
                font-style: Regular;
                font-size: 12px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                text-align: center;
                vertical-align: middle;
                color: var(--text-secondary);
            }
        }
    }

    .get-in-touch {
        padding: 20px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        display: flex;
        gap: 10px;
        flex-direction: column;

        p {
            font-family: Roboto;
            font-weight: 400;
            font-style: Regular;
            font-size: 14px;
            leading-trim: NONE;
            line-height: 140%;
            letter-spacing: 0%;
            vertical-align: middle;
            color: var(--text-secondary);
        }
    }

    h3 {
        font-weight: 500;
        font-style: Medium;
        font-size: 15px;
        line-height: 140%;
        letter-spacing: 0%;
        vertical-align: middle;
        color: var(--text-secondary);
    }


}

/* Overlay */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-secondary);
  z-index: 199;
}

.overlay.active {
  display: block;
}

.login-modal.popup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 375px;
    max-width: calc(100vw - 55px);
    height: fit-content;
    
    .popup-container {
        width: 100%;
/*         height: 100%; */
        height: auto;
        border-radius: 6px;
        padding: 0;
        display: flex;
        flex-direction: column;

        .login-form-section {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;

            p {
                font-family: Roboto;
                font-weight: 400;
                font-style: Regular;
                font-size: 12px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                vertical-align: middle;
                color: var(--text-secondary);
            }

            .login-form {
                display: flex;
                flex-direction: column;
                gap: 10px;

                label {
                    font-family: Roboto;
                    font-weight: 500;
                    font-style: Medium;
                    font-size: 15px;
                    leading-trim: NONE;
                    line-height: 140%;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    color: var(--text-primary);
                    
                }

                input {
                    padding: 10px;
                    border-radius: 6px;
                    border: 1px solid var(--border-color);
                    font-family: Roboto;
                    font-weight: 400;
                    font-style: Regular;
                    font-size: 15px;
                    leading-trim: NONE;
                    line-height: 140%;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    color: var(--text-secondary);
                    width: 100%;
                    background-color: var(--bg-primary);

                    &:active,
                    &:focus {
                        outline: none;
                    }
                }

                .password-wrapper {
                    position: relative;

                    svg {
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        transform: translateY(-50%);
                        cursor: pointer;
                    }
                }

                .submit {
                    font-family: Roboto;
                    font-weight: 500;
                    font-style: Medium;
                    font-size: 15px;
                    leading-trim: NONE;
                    line-height: 140%;
                    letter-spacing: 0%;
                    text-align: center;
                    vertical-align: middle;
                    text-transform: uppercase;
                    color: var(--bg-secondary);
                    background: var(--primary-color);
                    border: none;
                    padding: 20px;
                    border-radius: 50px;
                }
            }
        }

        .signup-button {
            width: 100%;

            a {
                font-family: Roboto;
                font-weight: 500;
                font-style: Medium;
                font-size: 15px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                text-align: center;
                vertical-align: middle;
                text-transform: uppercase;
                color: var(--primary-color);
                background: var(--bg-secondary);
                border: 1px solid var(--primary-color);
                padding: 20px;
                border-radius: 50px;
                width: 100%;
                display: block;
                text-decoration: none;
            }
        }
    }

    
}


@supports (-webkit-touch-callout: none) {
  .login-modal.popup {
		height: auto;
	}
}

.payment-popup {
    .cover-img {
        aspect-ratio: 375/100;
        width: 100%;
        height: auto;
        /* background-image: url(/assets/images/profile-cover-1.jpg); */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        img {
            aspect-ratio: 375/100;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .user-info {
        display: flex;
        gap: 10px;

        .avatar {
            position: relative;
            width: fit-content;
            display: flex;
            gap: 10px;

            img {
                width: 110px;
                height: 110px;
                object-fit: cover;
                border-radius: 100%;
                border: 1.5px solid var(--bg-secondary);
                margin-top: -52px;
            }

            .online-status {
                width: 14px;
                height: 14px;
                border: 1.5px solid var(--bg-secondary);
                position: absolute;
                right: 10px;
                bottom: 10px;
                border-radius: 100%;
                &.active {background-color: var(--status-active);}
                &.away {background-color: var(--status-away);}
                &.offline {background-color: var(--status-offline);}
            }
        }

        .metadata {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            height: fit-content;

            .profile-name {
                font-family: Roboto;
                font-weight: 500;
                font-style: Medium;
                font-size: 15px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                vertical-align: middle;
                color: var(--text-primary);
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .userslug {
                font-family: Roboto;
                font-weight: 400;
                font-style: Regular;
                font-size: 12px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                vertical-align: middle;
                color: var(--text-secondary);
            }
        }
    }

    .description {
        display: flex;
        flex-direction: column;
        gap: 10px;
        
        p {
            font-family: Roboto;
            font-weight: 500;
            font-style: Medium;
            font-size: 15px;
            leading-trim: NONE;
            line-height: 140%;
            letter-spacing: 0%;
            vertical-align: middle;
            text-transform: uppercase;
            color: var(--text-secondary);
        }

        ul.benefits {
            display: flex;
            flex-direction: column;
            gap: 10px;
            list-style: none;

            li {
                font-family: Roboto;
                font-weight: 400;
                font-style: Regular;
                font-size: 15px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                vertical-align: middle;
                color: var(--text-primary);
                display: flex;
                gap: 10px;
                align-items: center;
            }
        }
    }

    form.send-tip-form,
    form.subscribe-profile-form,
    form.bundle-profile-form {
        padding: 0;
        background-color: var(--bg-secondary);
        .form-group {
            border: none;
            padding: 20px;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            border-bottom: 1px solid var(--border-color);

            &:nth-last-of-type(1),
            &:nth-last-of-type(2) {
                border-bottom: none;
            }

            label {
                font-family: Roboto;
                font-weight: 500;
                font-style: Medium;
                font-size: 15px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                vertical-align: middle;
                color: var(--text-primary);
            }

            input {
                padding: 10px;
                border-radius: 6px;
                border: 1px solid var(--border-color);
                font-family: Roboto;
                font-weight: 400;
                font-style: Regular;
                font-size: 15px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                vertical-align: middle;
                color: var(--text-secondary);
                width: 100%;
                background-color: var(--bg-primary);

                &:active,
                &:focus {
                    outline: none;
                }
            }
            
            legend {
                font-family: Roboto;
                font-weight: 500;
                font-size: 15px;
                line-height: 140%;
                letter-spacing: 0%;
                color: var(--text-primary);
                display: block;
            }

            p {
                font-family: Roboto;
                font-weight: 400;
                font-style: Regular;
                font-size: 12px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                vertical-align: middle;
                color: var(--text-secondary);
            }

            .radio-options {
                display: flex;
                gap: 10px;

                input[type="radio"] {
                    display: none;
                }

                label  {
                    border: 1px solid var(--border-color);
                    aspect-ratio: 16/8.77;
                    height: auto;
                    border-radius: 6px;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;

                    font-family: Roboto;
                    font-weight: 500;
                    font-style: Medium;
                    font-size: 15px;
                    leading-trim: NONE;
                    line-height: 140%;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    text-transform: uppercase;
                    color: var(--text-secondary);
                    cursor: pointer;
                    transition: all 400ms ease;
                }

                input[type="radio"]:checked + label,
                label:has(input[type="radio"]:checked) {
                    border-color: var(--text-primary);
                }

                &:has(input[name="one-time-payment-plan"]),
                &:has(input[name="credits-plan"]) {
                    flex-direction: column;
                    label {
                        aspect-ratio: unset;
                        padding: 10px;
                        color: var(--text-primary);
                        justify-content: space-between;
                        text-transform: unset;
                        
                        ins {
                            text-decoration: none;
                        }

                        input {
                            display: flex;
                            width: 14px;
                            height: 14px;
                            position: relative;
                            appearance: none;
                            -webkit-appearance: none;
                            border-radius: 100%;
                            border: 1px solid var(--border-color);
                            padding: 0;
                            transition: all 0.2s ease;
                        }

                        span {
                            line-height: 18px;
                        }
                    }
                    
                    input[type="radio"]:checked + label,
                    label:has(input[type="radio"]:checked) {
                        border-color: var(--primary-color);
                        background: var(--primary-light);

                        input {
                            border-color: var(--primary-color);
                            background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3L3 5L7 1' stroke='%2300aaff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
                            background-repeat: no-repeat;
                            background-position: center;
                        }
                    }
                }

                &:has(input[name="credits-plan"])  {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(2, 1fr); 
                    
                    label {
                        flex-direction: column;
                        position: relative;

                        input {
                            position: absolute;
                            top: 10px;
                            right: 10px;
                        }

                        span.no-of-credits {
                            font-size: 28px;
                            font-weight: 700;
                            margin: 5px 0;
                        }

                        span.sm-text {
                            font-size: 12px;
                            color: var(--text-secondary);
                            text-align: center;

                            > .off-percentage{
                                color: darkgreen;
                            }
                        }

                        span.price {
                            font-size: 18px;
                            border: 1px solid var(--border-color);
                            padding: 5px;
                            width: 100%;
                            font-size: 14px;
                            text-align: center;
                            border-radius: 6px;
                        }
                        
                    }

                }
            }

            .checkbox-options {
                display: flex;
                flex-direction: column;
                gap: 10px;
                max-height: 218px;
                overflow-y: scroll;
                padding-right: 10px;
                
                label {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 10px;
                    border: 1px solid var(--border-color);
                    border-radius: 6px;
                    flex-wrap: wrap;
                    transition: all 400ms ease;

                    font-family: Roboto;
                    font-weight: 500;
                    font-style: Medium;
                    font-size: 15px;
                    leading-trim: NONE;
                    line-height: 140%;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    color: var(--text-primary);
                    cursor: pointer;

                    img {
                        width: 25px;
                        height: 25px;
                        border-radius: 100%;
                    }

                    span.name {
                        width: calc(100% - 59px);
                    }

                    input[type="checkbox"] {
                        width: 14px;
                        height: 14px;                        
                        /* visibility: hidden; */
                        position: relative;
                        appearance: none;
                        -webkit-appearance: none;
                        border-radius: 100%;
                        border: 1px solid var(--border-color);
                        padding: 0;
                        transition: all 0.2s ease;
                        
                        &:checked{
                            border-color: var(--primary-color);
                            background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3L3 5L7 1' stroke='%2300aaff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
                            background-repeat: no-repeat;
                            background-position: center;
                        }
                    }

                    &:has(input[type="checkbox"]:checked) {
                        border-color: var(--primary-color);
                        background: var(--primary-light);
                    }
                }
            }

            .card-info-fields {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto;
                gap: 10px;
                position: relative;

                & > div {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                }

                > div:first-child {
                    grid-column: 1 / 3;
                }

                .card-number-wrapper {
                    position: relative;

                    &::before {
                        content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDAuODg5MTZIMkMxLjYwMjE4IDAuODg5MTYgMS4yMjA2NCAxLjA0NzIgMC45MzkzNCAxLjMyODVDMC42NTgwMzUgMS42MDk4IDAuNSAxLjk5MTM0IDAuNSAyLjM4OTE2VjE0LjM4OTJDMC41IDE0Ljc4NyAwLjY1ODAzNSAxNS4xNjg1IDAuOTM5MzQgMTUuNDQ5OEMxLjIyMDY0IDE1LjczMTEgMS42MDIxOCAxNS44ODkyIDIgMTUuODg5MkgyMEMyMC4zOTc4IDE1Ljg4OTIgMjAuNzc5NCAxNS43MzExIDIxLjA2MDcgMTUuNDQ5OEMyMS4zNDIgMTUuMTY4NSAyMS41IDE0Ljc4NyAyMS41IDE0LjM4OTJWMi4zODkxNkMyMS41IDEuOTkxMzQgMjEuMzQyIDEuNjA5OCAyMS4wNjA3IDEuMzI4NUMyMC43Nzk0IDEuMDQ3MiAyMC4zOTc4IDAuODg5MTYgMjAgMC44ODkxNlpNMjAgMi4zODkxNlY0LjYzOTE2SDJWMi4zODkxNkgyMFpNMjAgMTQuMzg5MkgyVjYuMTM5MTZIMjBWMTQuMzg5MlpNMTguNSAxMi4xMzkyQzE4LjUgMTIuMzM4MSAxOC40MjEgMTIuNTI4OCAxOC4yODAzIDEyLjY2OTVDMTguMTM5NyAxMi44MTAxIDE3Ljk0ODkgMTIuODg5MiAxNy43NSAxMi44ODkySDE0Ljc1QzE0LjU1MTEgMTIuODg5MiAxNC4zNjAzIDEyLjgxMDEgMTQuMjE5NyAxMi42Njk1QzE0LjA3OSAxMi41Mjg4IDE0IDEyLjMzODEgMTQgMTIuMTM5MkMxNCAxMS45NDAyIDE0LjA3OSAxMS43NDk1IDE0LjIxOTcgMTEuNjA4OEMxNC4zNjAzIDExLjQ2ODIgMTQuNTUxMSAxMS4zODkyIDE0Ljc1IDExLjM4OTJIMTcuNzVDMTcuOTQ4OSAxMS4zODkyIDE4LjEzOTcgMTEuNDY4MiAxOC4yODAzIDExLjYwODhDMTguNDIxIDExLjc0OTUgMTguNSAxMS45NDAyIDE4LjUgMTIuMTM5MlpNMTIuNSAxMi4xMzkyQzEyLjUgMTIuMzM4MSAxMi40MjEgMTIuNTI4OCAxMi4yODAzIDEyLjY2OTVDMTIuMTM5NyAxMi44MTAxIDExLjk0ODkgMTIuODg5MiAxMS43NSAxMi44ODkySDEwLjI1QzEwLjA1MTEgMTIuODg5MiA5Ljg2MDMyIDEyLjgxMDEgOS43MTk2NyAxMi42Njk1QzkuNTc5MDIgMTIuNTI4OCA5LjUgMTIuMzM4MSA5LjUgMTIuMTM5MkM5LjUgMTEuOTQwMiA5LjU3OTAyIDExLjc0OTUgOS43MTk2NyAxMS42MDg4QzkuODYwMzIgMTEuNDY4MiAxMC4wNTExIDExLjM4OTIgMTAuMjUgMTEuMzg5MkgxMS43NUMxMS45NDg5IDExLjM4OTIgMTIuMTM5NyAxMS40NjgyIDEyLjI4MDMgMTEuNjA4OEMxMi40MjEgMTEuNzQ5NSAxMi41IDExLjk0MDIgMTIuNSAxMi4xMzkyWiIgZmlsbD0iIzg5OTZBMyIvPgo8L3N2Zz4K');
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: 10px;
                        width: 21px;
                        height: 15px;
                    }

                    input {
                        padding-left: 41px;
                    }
                }
            }



            &:has(.submit) {
                padding-top: 0;
            }

            .price-info {
                font-family: Roboto;
                font-weight: 400;
                font-style: Regular;
                font-size: 12px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                text-align: center;
                vertical-align: middle;
                color: var(--text-secondary);
            }

            .policy-consent {
                font-family: Roboto;
                font-weight: 400;
                font-style: Regular;
                font-size: 12px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                text-align: center;
                vertical-align: middle;
                color: var(--text-secondary);

                a {
                    text-decoration: none;
                    color: var(--primary-color);
                }
            }
        }

    }

    form {
        .submit {
            font-family: Roboto;
            font-weight: 500;
            font-style: Medium;
            font-size: 15px;
            leading-trim: NONE;
            line-height: 140%;
            letter-spacing: 0%;
            text-align: center;
            vertical-align: middle;
            text-transform: uppercase;
            color: var(--bg-secondary);
            background: var(--primary-color);
            border: none;
            padding: 20px;
            border-radius: 50px;
            width: 100%;
        }
    }
    
}

/* Mobile & Tablet */
@media (max-width: 1024px) {
    main {
        border: none;
    }
  .mobile-header {
    display: flex;
  }

  .wrapper {
    flex-direction: column;
    padding: 0;
    /* gap: 0; */
  }

    aside {
        padding: 0;
    }

  /* Left sidebar becomes off-canvas */
  .left-sidebar {
    position: fixed;
    right: -375px;
    width: 375px;
    height: 100dvh;
    z-index: 200;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    border: none;
    top: 0;
    padding: 0;

    ul {
        padding: 20px;
        list-style: none;

        li {
            padding: 15px 10px;

            &:has(a.login) {
                padding: 0;
            }

            a:not(.login) {
                gap: 20px;
            }
        }
    }

    .second-menu.sm-screens-only {
        ul {
            padding: 30px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            border-top: 1px solid var(--border-color);

            li {
                padding: 0;
                font-family: Roboto;
                font-weight: 500;
                font-style: Medium;
                font-size: 15px;
                line-height: 140%;
                letter-spacing: 0%;
                vertical-align: middle;
            }
        }
    }

    &.active {
        right: 0;
        margin: 0;
    }

    .close-menu {
        display: block;
    }
  }

  /* Right sidebar moves to top */
  .right-sidebar {
    position: relative;
    width: 100%;
    height: auto;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    order: 0;
    padding: 20px;
    order: 2;
    background: var(--bg-primary);

  }

  /* Main content */
  main {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
	main {
		.profile-listing {
			.profile-cover-img {
				aspect-ratio: 16/9;
			}
		}
		
		min-height: 100%;
	}
}

@media (max-width: 480px) {
  
}

@media (max-width: 375px) {
  .left-sidebar {
    right: calc(-100vw - 40px);
    width: calc(100vw - 40px);
  }
}

.toastify {
    max-width: calc(100% - 30px) !important;
}

#f4u-credit-balance-display {
	margin-left: 5px;

    #f4u-balance-amount {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        all: inherit
    }
}