/* Custom CSS for unique styles */

body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff; /* White background for overall page */
}

a, .btn-link, .text-colored {
    text-decoration: none; /* Remove default underline for links */
    color: #7F56D9; /* Purple color for active link */
}

.social-icon {
    margin-right: 8px;
    color: #007bff; /* Bootstrap primary color */
}
.fab.fa-facebook { color: #3b5998; }
.fab.fa-instagram { color: #E1306C; }
.fab.fa-x { color: #1DA1F2; }
.fab.fa-tiktok { color: #69C9EF; }

.modal-content {
    border-radius: 1rem; /* Rounded edges for modal */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Shadow effect */
}
.price {
    font-size: 1.5rem;
    color: #6f42c1; /* Bootstrap purple */
}
.plan-description {
    font-size: 0.9rem;
}
.project-plan {
    background-color: #f8f9fa; /* Light grey background */
    border: 1px solid #dee2e6; /* Border for clarity */
    padding: 15px;
    border-radius: 0.5rem; /* Rounded edges for the project plan */
}
.btn-purple {
    background-color: #6f42c1; /* Purple background */
    color: white;
    width: 100%; /* Full width */
    border-radius: 0.5rem; /* Rounded edges */
}
.btn-purple:hover {
    background-color: #5a3e9d; /* Darker purple on hover */
}
.tier-box {
    border: 1px solid #dee2e6; /* Border for each tier */
    border-radius: 0.5rem; /* Rounded edges for each tier */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow effect for each tier */
    padding: 20px; /* Padding inside each box */
    margin-bottom: 20px; /* Space between boxes */
    background-color: #ffffff; /* White background for each box */
}

.avatar {
    width: 80px; /* Set the width of the avatar */
    height: 80px; /* Set the height of the avatar */
    border-radius: 50%; /* Make it circular */
    object-fit: cover; /* Ensure it covers the area */
}

.sidebar {
    height: 100vh;
    width: 250px;
    background-color: #F9FAFB; /* Sidebar background color */
    border-right: 1px solid #e0e0e0;
    padding-top: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.sidebar ul {
    list-style-type: none;
    padding-left: 10px;
    padding-right:10px;
}

.sidebar a {
    text-decoration: none;
    color: #000;
    display: block; /* Make link full width */
    padding: 10px; /* Adjust padding for consistent spacing on both sides */

}
.sidebar a img {float:left;margin-right:5px;}

.sidebar a.active, .sidebar a:hover {
color: #7F56D9; /* Purple color for active link */
background-color: #e0d7ff; /* Light purple background */
border-radius: 5px;
}

.content-container {
    padding-top: 60px; /* To avoid overlapping with the fixed header */
    margin-left: 250px; /* Adjusted for the sidebar */
}

.header {
    height: 60px;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px;
    position: fixed;
    top: 0;
    width: calc(100%);
    background-color: #ffffff;
    z-index: 1000;
}

.profile-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid white;
}

.header-buttons {
    margin-top: 10px;
}

.btn-primary {
    background-color: #7F56D9; /* Fill purple on hover */
    color: #ffffff; /* White text on hover */
    border-color: #7F56D9; /* Purple border */
    font-weight:600;
}

.btn-primary:hover {
    background-color: #996ff4; /* Fill purple on hover */
    color: #ffffff; /* White text on hover */
    border-color: #7F56D9; /* Purple border */
}


.btn-outline-primary {
    border-color:#D6BBFB;
    color: #7F56D9; /* Purple text */
    font-weight:600;
}

.btn-outline-primary:hover {
    background-color: #7F56D9; /* Fill purple on hover */
    color: #ffffff; /* White text on hover */
}

.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #fff;
}

.post-card, .membership-card, .playlist-card {
    border: none; /* Remove border from cards */
    box-shadow: none; /* Remove box-shadow for a cleaner look */
}

.card-header-img {
    height: 250px;
    object-fit: cover;
    width: 100%;
}

/* Custom tab styling */
.nav-tabs {
    border-bottom: none; /* Remove the default border */
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent; /* Invisible border for spacing */
    color: #667085;
    font-weight: bold;
}

.nav-tabs .nav-link.active {
    color: #7F56D9; /* Purple color for active tab */
    border-bottom: 2px solid #7F56D9; /* Purple underline for active tab */
}

.nav-tabs .nav-link:hover {
    border-bottom: 2px solid #d1cfff; /* Light purple for hover */
}

/* Badge styling for star rating and comments */
.badge-custom {
    background-color: transparent; /* Transparent background */
    border: 1px solid #EAECF0; /* Grey border */
    color: #000; /* Black text */
    padding: 5px 10px;
    font-weight: normal;
    line-height:16px;
}
.badge-custom img {float:left;margin-right:5px;}

/* Footer links styling */
footer a {
    color: #7F56D9; /* Purple color for footer links */
}

footer a:hover {
    text-decoration: underline; /* Add underline on hover for footer links */
}

h1 {

    font-size:24px;
    font-weight:bold;
    margin-bottom:0;
}
/* Desktop styling */
@media (min-width: 992px) {
    .sidebar {
        display: block;
        margin-top:20px;
    }

    .container {
        max-width: 1100px;
    }

    .header-buttons {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .profile-info {
        text-align: left;
    }

    .post-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .membership-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .playlist-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Mobile styling */
@media (max-width: 991.98px) {
    .sidebar {
        display: none; /* Hide sidebar on mobile */
    }

    .content-container {
        margin-left: 0; /* Full width content on mobile */
    }

    .header {
        width: 100%;
        left: 0;
    }
}

/* Footer styling */
footer {
    padding: 20px 0;
    width: 100%; /* Make footer full-width */
}

footer .container {
    max-width: 1100px;
}

.bg-transparent {
    background-color: transparent !important;
}


.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.chat-bubble {
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.chat-bubble.sent {
    background-color: #7F56D9;
    text-align: left;
}
.chat-bubble.received {
    background-color: #7F56D9;
    text-align: left;
    color: #fff;
}
.product-card {
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.product-price {
    color: #6f42c1;
    font-weight: bold;
}
.product-old-price {
    text-decoration: line-through;
}
.attachment-card {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
.attachment-icon {
    font-size: 2rem;
    color: red;
    margin-right: 10px;
}
.input-group-text {
    background-color: #f1f1f1;
}
        .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        .chat-bubble {
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        .chat-bubble.sent {
            background-color: #7F56D9;
            text-align: left;
        }
        .chat-bubble.received {
            background-color: #7F56D9;
            text-align: left;
            color: #fff;
        }
        .product-card {
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .product-price {
            color: #6f42c1;
            font-weight: bold;
        }
        .product-old-price {
            text-decoration: line-through;
        }
        .attachment-card {
            display: flex;
            align-items: center;
            padding: 10px;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .attachment-icon {
            font-size: 2rem;
            color: red;
            margin-right: 10px;
        }
        .input-group-text {
            background-color: #f1f1f1;
        }
        .payment-method-icon {
            margin-right: 5px;
        }



        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
          }

          .video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
          }

          .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
        .badge-unlimited {
            background-color: #e6ccff;
            color: #6f42c1;
            border-radius: 20px;
            padding: 2px 8px;
            font-weight: bold;
        }
        .menu-icon {
            margin-right: 10px;
        }
        .language-toggle img {
            width: 24px;
            margin-right: 5px;
        }
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
        .crown-badge {
            background: #f3e6fa;
            color: #6f42c1;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
        }
        .content-card {
            margin-bottom: 20px;
            padding: 15px;
        }
        .rating {
            color: #f39c12;
        }
        .exclusive-badge {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(5px);
            color: #6f42c1;
            border-radius: 5px;
            padding: 3px 10px;
        }
        .btn-action {
            width: 48%;
            margin: 5px 1%;
        }
        .background-box {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.8)), url('/images/post1.png') no-repeat center center;
            background-size: cover;
            padding: 20px;
            border-radius: 0.5rem;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            aspect-ratio: 16/9;
        }
        .dropdown-menu-end {
            right: 0;
            left: auto;
        }
        .rating-star {
            color: #f39c12;
            cursor: pointer;
        }
        .bg-grey {background:#F2F4F7;}
        .badge-active {background:#F9F5FF;color:#6941C6;}