/****************************************************
             MAIN CONTENT SECTION
****************************************************/
.content-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

@media (max-width: 600px) {
    .content-section {
        padding: 0.5rem;
    }
}

/****************************************************
                * Activity Card 
****************************************************/
.activity-card {
    position: relative;
    background: var(--white);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px var(--navBar-shadow);
    /* negative margin pulls the card "up" */
    display: inline-block;
    width: 100%;
    /* Keep some spacing at bottom just in case */
    margin-bottom: 2rem;
    min-height: 400px;
    margin-top: 180px;
}

@media (max-width: 600px) {
    .activity-card {
        padding: 1rem;
    }
}

.username {
    font-size: 1.1rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.profileUsername {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--dark-grey);
    font-family: 'Zain';
    font-size: 1.4rem;
}

.buttons-container {
    display: inline-flex;
    gap: 10px;
    margin-bottom: 1.5rem;
}

@media (max-width: 400px) {
    .buttons-container button {
        font-size: 14px;
        padding: 24px 12px;
    }
}

.action-btn {
    background: var(--suggestion-list);
    border: none;
    padding: 40px 20px;
    cursor: pointer;
    border-radius: 10px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.3s;
    font-family: 'Inter';
    color: var(--nav-menu-hvr);
}

.action-btn:hover {
    background: var(--action-btn);
    color: #1a1a1a;
}

.action-btn.active {
    background: var(--action-btn);
    color: #1a1a1a;
    box-shadow: 3px 3px 3px var(--post-card-shadow);
}


/****** Align post content to left 
(remove center behaviour of container) ******/
#activityDynamicContent {
    text-align: left;
    color: var(--dark-grey);
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

/******************** activity Tabs **************************/
/* ======= activity Tab Bar ======= */
.activity-tab-bar {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: var(--white);
    display: flex;
    justify-content: space-around;
    border-radius: 6px;
    padding: 10px 0;
    padding-left: 5px;
    padding-right: 5px;
    box-shadow: 0 4px 10px var(--navBar-shadow);
    z-index: 999;
    margin-bottom: 50px;
}

/* ======= activity Tab Buttons ======= */
.activity-tab-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 5px;
    color: var(--content-grey);
    transition: all 0.3s ease;
}

.activity-tab-txt {
    font-family: "Zain";
    font-size: 18px;
}

.activity-tab-btn img {
    width: 20px;
    margin-bottom: 5px;
    filter: invert(53%) sepia(50%) saturate(1500%) hue-rotate(175deg);
    transition: filter 0.3s ease;
}

/* Active Button */
.activity-tab-btn.active {
    background: var(--action-btn);
    border-radius: 6px;
    padding: 5px 20px;
    color: var(--content-grey);
}

.activity-tab-btn.active img {
    filter: invert(50%) brightness(50%);
}

.profileUsername {
    color: var(--content-grey);
    justify-content: space-around;
}

/* ======= Dark Mode Support ======= */
:root.dark-mode .activity-tab-bar {
    background: #3a3f4b;
    box-shadow: 0 4px 10px var(--notif-shadow);
}

:root.dark-mode .activity-tab-btn {
    color: var(--light-grey);
}

:root.dark-mode .activity-tab-btn.active {
    background: var(--action-btn);
    color: var(--white);
}

/****************** Comments Tab *****************/
.user-comments-scroll {
    max-height: 200px;
    /* Adjust height as needed */
    overflow-y: auto;
    margin-top: 1rem;
    padding-left: 1rem;
    /* Optional for indentation */
    border-left: 2px solid #ccc;
    scrollbar-color: var(--light-blue) var(--body-bg);
    /* Hide scrollbar by default */
    scrollbar-width: thin;
}

/******************** Modify activity Image ********************/
/* Container with dotted border around the activity pic */
.profile-image {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px dashed #74a8ecec;
    /* dotted ring color */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

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

/* Blue camera button that sits partially overlapping the bottom of the circle */
.profile-image .edit-btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    background-color: #4285f4;
    /* blue circle color */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Camera icon size inside the blue circle */
.profile-image .edit-btn img {
    width: 20px;
    height: 20px;
}

/* Hide the file input—clicking label triggers it */
#profilePic {
    display: none;
}