/* |-----------------------------------------------------------
| BASE & LAYOUT STYLES
|-----------------------------------------------------------
*/
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
/* OPTIONAL: To center the entire page layout */
main {
    /* Use 'main' to control the overall width and center the entire content area */
    max-width: 1200px; /* Max width of your entire page content */
    margin: 0 auto; /* Centers the main content area */
    padding: 20px; /* Add some overall padding */
}

/* 1. Container to hold both the new sidebar and the existing wrapper */
.page-layout {
    display: flex; /* Enables flex layout */
    justify-content: flex-start; /* Aligns content to the start */
    
    /* Add top/bottom margin here instead of on .wrapper */
    margin-top: 40px; 
    margin-bottom: 40px;
}

/* 2. Style for the new sidebar content */
.left-sidebar {
    /* Set a fixed width for the sidebar */
    width: 600px; /* Adjust this width as needed for your content */
    
    /* This creates the 20px space between the sidebar and the wrapper */
    margin-right: 20px; 
    
    /* Padding for the sidebar content */
    padding-top: 20px; /* Align content vertically with main title */
}

/* 3. Ensure the original wrapper can still grow or maintain its max-width */
.wrapper {
    /* REMOVE: margin: 40px auto; */
    /* It's replaced by margin on .page-layout, and flex handles horizontal positioning */
    
    flex-grow: 1; /* Allows the wrapper to take up the remaining space */
    max-width: 900px; /* Keep your original max-width */
    padding: 25px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.comments-list a:link,
.comments-list a:visited {
    color: #800080; /* Purple color for links only within the comments section */
}

.comments-list a:hover {
    color: #C0C0C0; /* Light Gray on hover */
}

h2 {
    color: #4B0082; /* Indigo */
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    
    /* 🔥 CHANGE THIS FROM 16px to 24px or higher 🔥 */
    font-size: 24px; 
    
    font-weight: bold;
}
/* Ensure the H2 inside the profile title container is BOLD */
.profile-title-container h2 {
    font-weight: bold !important; /* Forces the bold style */
    font-size: 24px; /* OPTIONAL: Increase font size for prominence */
     text-transform: capitalize;
}

p {
    /* Font style settings */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* A clear, modern font */
    font-size: 17px;                                           /* Slightly smaller than default for body text */
    line-height: 1.6;                                          /* Good line spacing for reading paragraphs */

    /* Color setting */
    color: #00008B; /* DarkBlue */
}

.main-content {
    padding: 40px;
    text-align: center;
}

/* |-----------------------------------------------------------
| HEADER & NAVIGATION STYLES
|-----------------------------------------------------------
*/
header {
    width: 100%;
    height: 50px;
    color: white;
    text-align: left;
    /* REMOVED font-size: 30px; - Let the children control size */
    background: linear-gradient(to right, #00008B, #4169E1); /* Navy to Royal Blue */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-right: 20px;
}
header .header-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-left: 50px;
}
header .header-content span.logo-text {
    white-space: nowrap;
    font-size: 30px; /* Explicit size for logo */
    margin-right: 10px;
}

/* Header Links (Applies to all links including dropdown button text) */
header a, .dropbtn {
    color: white;
    text-decoration: none;
    font-size: 20px;
    white-space: nowrap;
    transition: color 0.2s, text-decoration 0.2s;
}
header a:hover, .dropbtn:hover {
    color: #f0f0f0;
    text-decoration: underline;
}

/* User Info Section (Right aligned) */
.user-info {
    color: white;
    font-size: 18px;
    margin-left: auto; /* Pushes it to the right */
    margin-right: 20px;
    white-space: nowrap;
}
.user-info a {
    font-size: 18px; /* Override the 20px link size */
    margin-left: 10px;
    text-decoration: underline;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropbtn {
    background-color: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #00008B;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10; /* Ensures it sits above header content */
    border-radius: 5px;
    padding: 10px 0;
    left: 0;
    top: 100%;
}
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 18px;
}
.dropdown-content a:hover {
    background-color: #4169E1;
    text-decoration: none;
}
.dropdown:hover .dropdown-content {
    display: block;
}

/* |-----------------------------------------------------------
| GENERAL BUTTON STYLES (Consolidated)
|-----------------------------------------------------------
*/
/* Basic Button Style */

/* Basic Button Style (FIXED) */
.btn {
    /* Shape and Sizing */
    border-radius: 15px;
    padding: 7px 10px;
    margin-right: 5px;
    font-size: 16px;
    cursor: pointer;
    
    /* Colors */
    background-color: #F0F8FF; /* AliceBlue */
    color: #00008B;            /* DarkBlue */
    
    /* NEW: Explicitly remove the border */
    border: none; 
    
    /* Transition for smooth hover effect */
    transition: background-color 0.3s ease;
}

/* Hover Effect Style (FIXED) */
.btn:hover {
    background-color: #F0FFFF; /* Azure */
    color: #00008B;            /* Ensure text color remains DarkBlue */
    
    /* CORRECTION: Explicitly remove the border again for safety */
    border: none; 
}


/* Specific Button Overrides */
/* Basic Button Style (FIXED)  .btn-primary */
.btn-primary {
    /* Shape and Sizing */
    border-radius: 15px;
    padding: 7px 10px;
    margin-right: 5px;
    font-size: 16px;
    cursor: pointer;
    
    /* Colors */
    background-color: #F0F8FF; /* AliceBlue */
    color: #00008B;            /* DarkBlue */
    
    /* NEW: Explicitly remove the border */
    border: none; 
    
    /* Transition for smooth hover effect */
    transition: background-color 0.3s ease;
}

/* Hover Effect Style (FIXED) */
.btn-primary:hover {
    background-color: #F0FFFF; /* Azure */
    color: #00008B;            /* Ensure text color remains DarkBlue */
    
    /* CORRECTION: Explicitly remove the border again for safety */
    border: none; 
}

.profile-description-box {
    /* --- Border Styles (for the box appearance) --- */
    border: 1px solid #ddd;      /* A subtle, light grey border */
        padding: 15px;               /* Space inside the border, around the text */
    margin-top: 10px;            /* Space above the box, separating it from the "About Me" heading */
    border-radius: 4px;          /* Slightly rounded corners for a modern look */
    background-color:  #F0F8FF; /* AliceBlue */

    /* --- Text Styles --- */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* A clear, modern font */
    font-size: 17px;             /* Slightly smaller than default for body text */
    color:  #000066;            /* DarkBlue */
    line-height: 1.6;            /* Good line spacing for reading paragraphs */
}

/* Specific Button Overrides .btn-secondary  */
.btn-secondary  {
    /* Shape and Sizing */
    border-radius: 15px;
    padding: 7px 10px;
    margin-right: 5px;
    font-size: 16px;
    cursor: pointer;
    
    /* Colors */
    background-color: #F0F8FF; /* AliceBlue */
    color: #00008B;            /* DarkBlue */
    
    /* NEW: Explicitly remove the border */
    border: none; 
    
    /* Transition for smooth hover effect */
    transition: background-color 0.3s ease;
}

/* Hover Effect Style (FIXED) */
.btn-secondary:hover {
    background-color: #F0FFFF; /* Azure */
    color: #00008B;            /* Ensure text color remains DarkBlue */
    
    /* CORRECTION: Explicitly remove the border again for safety */
    border: none; 
}

/* Specific Button Overrides .btn-secondary */




/* Specific Button Overrides */
/* Re-using base styles for Danger and Info, only setting unique colors if needed */
.btn-danger, .btn-info {
    /* Shape and Sizing */
    border-radius: 15px;
    padding: 7px 10px;
    margin-right: 5px;
    font-size: 16px;
    cursor: pointer;
    
    /* Colors */
    background-color: #F0F8FF; /* AliceBlue */
    color: #00008B;            /* DarkBlue */
    
    /* NEW: Explicitly remove the border */
    border: none; 
    
    /* Transition for smooth hover effect */
    transition: background-color 0.3s ease;
}
/* Override the height for inputs ONLY inside the login form container */
.login-form-container .form-control {
    /* Set a standard height for text and password fields (overriding the 150px) */
    height: 40px !important; 
    
    /* Ensure padding is reasonable for the new height */
    padding: 10px; 
    
    /* Remove the 'resize: none;' property that was bleeding over from textarea styles */
    resize: unset !important; 
}

/*
|-----------------------------------------------------------
| FORM CONTROLS (Insert the missing block here)
|-----------------------------------------------------------
*/
.form-group {
    margin-bottom: 15px;
}

/* Base styling for elements with the .form-control class (like text inputs and dropdowns) */
.form-control {
    width: 500px;
    padding: 12px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 15px;
    background-color: #fff;
    font-size: 18px;
    color: #000066;
}
/* Note: I removed the height, resize, and specific color from this block. */

/* Optional: Add basic styling for ALL textareas if needed, but keep it minimal */
textarea {
    resize: none; /* Good default for all text areas */
    /* Add any other minimal, global styles here */
}
/* Specific styling ONLY for the main comment text area */
#comment_text {
    width: 500px;
    height: 150px;
    padding: 12px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 15px;
    background-color: #fff; /* Keep this simple white as a neutral default */
    font-size: 18px;
    /* Removed custom color property to respect user selection */
    resize: none; 
}

/* Base styling for elements with the .form-control class */
.form-control {
    width: 500px;
    padding: 12px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 15px;
    background-color: #fff;
    font-size: 18px;
    /* Removed custom color property to respect user selection */
}


/* FOCUS STYLING FOR 'Brief Description About Yourself' (the textarea) */
/* This also applies to .form-control elements if they are used for other text inputs */
.form-control:focus, 
textarea:focus {
    outline: none; /* Removes the default browser outline */
    border-color: #007bff; /* Changes border color to blue on focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Adds a subtle shadow on focus */
}

/* FOCUS STYLING FOR 'Choose File' (the file input) */
input[type="file"]:focus {
    /* Removes the blue focus outline/shadow from the file input */
    outline: none; 
    box-shadow: none;
}
/* Base styling for the file input (when NOT focused) */
input[type="file"] {
    /* Remove the custom border that might be inherited */
    border: none !important; 
    /* Remove any background that might be inherited */
    background-color: transparent !important;
    /* Reset any padding/margin that might be causing a container box */
    
}

/* FOCUS STYLING FOR 'Choose File' (the file input) - Keep this as is */
input[type="file"]:focus {
    /* Removes the blue focus outline/shadow from the file input */
    outline: none; 
    box-shadow: none;
}

/* --- GALLERY SLIDER STYLES --- */

/* Overall container for the gallery section */
.gallery-section {
    padding: 20px 0;
    text-align: center;
}

/* The viewport/window for the slider */
.slider-container {
    position: relative;
    max-width: 700px; /* Max size for the slider view */
    height: 450px; /* Fixed height for consistent display */
    margin: 20px auto;
    border: 5px solid #333; 
    overflow: hidden; /* CRITICAL: Hides images that are off-screen */
    background-color: #000; /* Black background for contrast */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* The wrapper that holds all slides and is translated (moved) horizontally */
.slider-wrapper {
    display: flex; 
    height: 100%;
    /* Smooth transition when moving between slides */
    transition: transform 0.5s ease-in-out;
    /* Ensures the wrapper starts correctly on load */
    transform: translateX(0%); 
}

/* Individual image slide container */
.slider-item {
    min-width: 100%; /* Makes each item take up 100% of the container width */
    height: 100%;
    box-sizing: border-box;
    display: flex; 
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    position: relative;
    flex-shrink: 0; /* Prevents items from squishing */
}

/* The actual image element inside the slide */
.slider-item img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    /* Ensures the whole image is visible without cropping */
    object-fit: contain; 
    display: block;
}

/* Navigation buttons (arrows) */
.slider-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 30px; 
    z-index: 10;
    border-radius: 50%; /* Circle buttons */
    transition: background-color 0.2s;
}

.slider-nav-button:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* Positioning the buttons */
#prevBtn { 
    left: 10px; 
}
#nextBtn { 
    right: 10px; 
}

/* Tag for pending images (only visible to owner/admin) */
.pending-tag {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: red; 
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    z-index: 11;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    text-transform: uppercase;
}

/* Hides the buttons if JavaScript determines sliding is not needed (0 or 1 image) */
.slider-nav-button.hidden {
    display: none;
}

/* |-----------------------------------------------------------
| LIKE & COMMENT STYLES
|-----------------------------------------------------------
*/
.comment-form-section, .comments-list-section {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.comment-item {
    border-left: 3px solid #ADD8E6; /* Light Blue */
    padding: 10px 15px;
    margin-top: 10px;
    background: #FFF;
    border-radius: 4px;
}
.like-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: #555;
    font-weight: bold;
}
.like-button  {
    /* Shape and Sizing */
    border-radius: 15px;
    padding: 7px 10px;
    margin-right: 5px;
    font-size: 16px;
    cursor: pointer;
    
    /* Colors */
    background-color: #F0F8FF; /* AliceBlue */
    color: #00008B;            /* DarkBlue */
    
    /* NEW: Explicitly remove the border */
    border: none; 
    
    /* Transition for smooth hover effect */
    transition: background-color 0.3s ease;
}

.like-button:hover{
    background-color: #F0FFFF; /* Azure */
    color: #00008B;            /* Ensure text color remains DarkBlue */
    
    /* CORRECTION: Explicitly remove the border again for safety */
    border: none; 
}
.likes-count {
    font-size: 14px;
    color: #6c757d; /* Added missing color from old styles */
}
.like-style-button { /* Special style for blocked users, etc. */
    background-color: #ffc107 !important; /* Yellow */
    color: #333 !important;
    border: 1px solid #ffc107;
}


/* Style for the actual image element */


/* Style for the paragraph containing the username (the p tag inside reply-header-with-image) */
.reply-header-with-image p {
    margin: 0; /* Remove default paragraph margin */
    /* You might want to style the username text itself here too, 
       but for this example, we'll keep the existing strong tag styling. */
}

/* Optional: Add some padding/indentation to replies to visually separate them */
.reply-item {
    /* INDENTATION & SPACING */
    margin-top: 10px;        /* Adds space above the reply item (from the previous block) */
    margin-left: 10px;       /* Pushes the whole reply block over 30px (from your new block) */
    padding-left: 20px;      /* Adds internal space/indentation next to the border (from the previous block) */

    /* VISUAL CUES */
    background: #F5F5F5;     /* Sets a light gray background color for the reply (from your new block) */
    border-left: 3px solid #ADD8E6; /* Sets a light blue vertical line/border on the left (from your new block) */
}
/* 1. Style the image itself: make it 40px and circular */
.reply-profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* This is the key to making it circular! */
    object-fit: cover;
    /* Optional: You may want to add the same border as the main comment image */
    /* border: 2px solid #ccc; */
}

/* 2. Layout for the reply header (image + username) */
.reply-header-with-image {
    display: flex;
    align-items: center; /* Vertically center the image and text */
    margin-bottom: 5px;
}

/* 3. Spacing for the picture link */
.reply-profile-link {
    margin-right: 10px; /* Space between picture and username */
    flex-shrink: 0;
}

/* 4. Align the reply text below the image/username header */
/* This rule assumes the comment text for the reply is contained in a <p>
   immediately after the .reply-header-with-image div. */
.reply-item > p {
    /* Offset the text to align below the username/comment, not the picture */
    margin-left: 50px; /* 40px (pic width) + 10px (link margin) */
}

/* Ensure that the reply profile picture (which is inside .reply-item) is always a circle */
.reply-item .reply-profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50% !important; /* Adding !important guarantees it overrides the general .comment-item img rule */
    object-fit: cover;
}

/* You may also need to do this for the main comment picture if it has the same issue */
.comment-item .comment-profile-pic {
    border-radius: 50% !important; 
}


/* |-----------------------------------------------------------
| PROFILE & COMMENT IMAGE STYLES
|-----------------------------------------------------------
*/
/* comment out using a banner
.profile-picture-container {
    text-align: center;
    margin-bottom: 20px;
}  */
/* comment out because using a banner 
.profile-picture-container img.profile-picture {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    /* Added back default styling for the main profile picture */
    border: 5px solid #fff; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}  */
/* Target all <img> elements directly inside the .comment-images-container */
.comment-images-container img {
    /* Set the fixed dimensions */
    width: 150px;
    height: 150px;
/* Container for all images within a single comment or reply */
.comment-images-container {
    display: flex; /* Arranges images side-by-side */
    flex-wrap: wrap; /* Allows images to wrap to the next line */
    gap: 10px; /* Space between the images */
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px;
}

    /* Ensure the image fills the box without stretching (may crop) */
    object-fit: cover;

    /* Optional: Keep the gap and pointer for clicking */
    cursor: pointer;
    margin: 5px; /* Add some margin if your container doesn't have a gap */
    border-radius: 4px; /* Matches your previous style */
    border: 1px solid #ddd;
}
.comment-item img {
    max-width: 100px; /* Reduced from 300px back to 100px for thumbnail size */
    max-height: 100px; /* Reduced from 300px back to 100px for thumbnail size */
    height: auto;
    border-radius: 5px;
    margin-top: 10px;
    margin-right: 5px; /* Added spacing */
    cursor: pointer;
    object-fit: cover;
}

/* Styling for Commenter Profile Pictures */
.commenter-profile-pic {
    /* Set dimensions to 30px by 30px */
    width: 30px;
    height: 30px;
    
    /* Create the circular shape */
    border-radius: 50%; 
    
    /* Ensure the image fits nicely */
    object-fit: cover; 
    
    /* Align the picture with the text */
    vertical-align: middle; 
    
    /* Add a little space between the picture and the username */
    margin-right: 5px; 
}

/* Optional: Add a smooth transition or border for a clean look */
.commenter-profile-pic:hover {
    opacity: 0.8;
}

/* Styling for the main comment header */
.comment-header-with-image {
    display: flex;
    align-items: center; /* Aligns the picture and text vertically */
    margin-bottom: 5px; /* Space above the comment text */
}

.comment-profile-pic {
    width: 40px; 
    height: 40px;
    border-radius: 50%; /* Makes the image round */
    object-fit: cover;
    margin-right: 10px; /* Space between the picture and the username */
}

/* Optional: Ensure the username text doesn't have extra margins */
.comment-header-with-image p {
    margin: 0;
}

/* |-----------------------------------------------------------
| GALLERY & MODAL STYLES (Gallery comments corrected)
|-----------------------------------------------------------
*/
/* CORRECTED: The previous block had missing closing comment tags  */
.gallery-main-image-container {
    /* Sets the max size for the main display */
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    /* Forces a 16:9 aspect ratio for the main image area */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.gallery-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
}

/* Gallery Thumbnails */
.gallery-thumbnails {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.gallery-thumbnails::-webkit-scrollbar {
    display: none;
}
.gallery-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 0.25rem;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid;
    border-color: #d1d5db;
}
.gallery-thumbnail.active {
    opacity: 1.0;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px #3b82f640;
}
.image-wrapper {
  position: relative; 
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- General Modal Styling --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #F0F8FF;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* --- Image Modal (Lightbox) --- */
#imageModal {
  /* Full screen overlay - CHANGED TO 100% */
  position: fixed;
  z-index: 2000; /* Higher than everything else */
  left: 0;
  top: 10;
  width: 100%;
  height: 100%;
  
  /* Semi-transparent dark background so the 'X' is visible */
  background-color: rgba(0, 0, 0, 0.85); 
  
  /* Center the image */
  display: none; 
  justify-content: center;
  align-items: center;
}
#imageModal.show {
  display: flex;
}

#imageModal-content {
  /* Ensure the image is the correct size */
  display: block;
  max-width: 100%; 
  height: auto;
}
/* Ensure the image inside the content container fills it */
#imageModal-content img {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  display: block;
  border: 3px solid #fff; /* Optional: adds a frame to the image */
}

.image-close-btn {
  /* Positioning relative to the image-wrapper */
  position: absolute;
  top: -40px;    /* Moves it ABOVE the image so it doesn't block content */
  right: 0px;    /* Aligns to the right edge of the image */
  z-index: 2010; 
  color:  #008000;   /* green */
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}
.image-close-btn:hover {
  color: #ff0000; /* Red on hover so user knows it's the close button */
}


/* --- Message Modal --- */
.message-modal {
    display: none;
    position: fixed;
    z-index: 1002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
}
.message-modal-content {
    background-color: #fefefe;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-align: center;
}
.message-modal-content h3 {
    margin-top: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    .wrapper {
        padding: 10px;
        margin: 10px auto;
    }
    .header-content {
        padding-left: 10px;
        gap: 10px;
    }
    header .header-content span.logo-text {
        font-size: 24px;
    }
    header a, .dropbtn {
        font-size: 16px;
    }
    .user-info {
        font-size: 14px;
    }
}

/* |-----------------------------------------------------------
| MISSING MODAL BUTTON STYLES
|-----------------------------------------------------------
*/
.close-modal-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Ensure the textarea inside the modal doesn't break the layout */
.message-modal-content textarea {
    width: 100%;
    resize: vertical; /* Allow vertical resizing only */
    margin-top: 10px;
    margin-bottom: 10px;
}
/* |-----------------------------------------------------------
|  ALERT BELL & PROFILE TITLE STYLES
|-----------------------------------------------------------
*/

/* 1. Center the Name and Bell together */
.profile-title-container {
    display: flex;
    align-items: center; /* Vertically align center */
    justify-content: center; /* Horizontally align center */
    gap: 15px; /* Space between name and bell */
    margin-bottom: 20px;
    border-bottom: 2px solid #eee; /* Moved border to container */
    padding-bottom: 10px;
}

/* Remove border/margin from the H2 since the container handles it now */
.profile-title-container h2 {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 2. Bell Container */
.alert-bell-container {
    position: relative; /* Needed for absolute positioning of dot/dropdown */
    display: inline-block;
    cursor: pointer;
}

/* 3. The Bell Image */
.alert-bell-image {
    width: 30px;  /* Adjust size as needed */
    height: 30px;
    vertical-align: middle;
}

/* 4. The Red Dot (Notification) */
.alert-dot {
    height: 12px;
    width: 12px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: -2px;
    right: -2px;
    border: 2px solid #fff; /* White ring around dot */
}

/* 5. The Dropdown Message (Hidden by default) - UPDATED FOR BLUE BACKGROUND */
.bell-dropdown-content {
    display: none;
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    
    /* 🎨 COLOR CHANGES: Blue Background, White Text */
    background-color: #007bff; /* Standard Bootstrap Blue */
    color: white; /* White text for contrast */
    
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4); /* Stronger shadow */
    padding: 12px 16px;
    z-index: 100;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #0056b3; /* Darker blue border */
}

/* Triangle pointer for the dropdown (Optional aesthetics) */
.bell-dropdown-content::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    /* Match the background color for the pointer */
    border-color: transparent transparent #007bff transparent; 
}

/* 6. Show Dropdown on Hover */
.alert-bell-container:hover .bell-dropdown-content {
    display: block;
}

/* 7. Link Styling inside the Blue Dropdown */
.bell-dropdown-content a {
    color: #ffc107; /* Yellow/Amber text for high contrast on blue */
    font-weight: bold;
    text-decoration: underline;
}
/* Container for the likes count text and the tooltip */
.likes-count-container {
    /* Required to position the tooltip relative to this container */
    position: relative;
    /* Allows the user to hover over the likes count */
    display: inline-block;
    cursor: pointer; /* Optional: Indicates it's interactive */
}

/* Style for the custom tooltip box */
.custom-like-tooltip {
    /* Initially hidden */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    
    /* Styling for the requested look */
    background-color: #007bff; /* Blue background */
    color: #ffffff; /* White text */
    font-size: 14px; /* 14px text size */
    
    /* Positioning */
    position: absolute;
    z-index: 10; /* Ensure it appears above other elements */
    bottom: 125%; /* Position above the likes count */
    left: 50%;
    transform: translateX(-50%);
    
    /* Box appearance */
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap; /* Keep content on one line */
    text-align: center;
}

/* State when the container is hovered over */
.likes-count-container:hover .custom-like-tooltip {
    visibility: visible;
    opacity: 1;
}
/* 🎯 Fix for Main Comment Images: Enforces thumbnail size with high specificity */
.comments-list-section .comments-list .comment-images-container img {
    /* Critical size control */
    max-width: 100px !important; 
    max-height: 100px !important;
    
    /* Display properties */
    object-fit: cover !important;
    width: auto !important; /* Prevents stretching if another rule sets width: 100% */
    height: auto !important; /* Prevents stretching */
    
    /* Other visual styles (optional, but good for consistency) */
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}
/* FIX: Force all text inside the custom comment wrapper to inherit the color */
.comment-wrapper, 
.comment-wrapper p, 
.comment-wrapper span,
.comment-wrapper a {
    /* Inherit the color set by the inline style of the parent wrapper */
    color: inherit !important; 
}
/* Ensure the image container is forced onto a new line below the video */
.comment-images-container {
    /* Critical: Clears any floats that might be causing side-by-side layout */
    clear: both; 
    /* Critical: Ensures the element takes up its own line */
    display: block; 
    /* Add top margin for spacing */
    margin-top: 10px; 
}

/* Add a margin for spacing */
.comment-images-container {
    margin-top: 10px; 
    /* The thumbnail sizing should still apply here */
}
/* Limit the YouTube container's width */
.youtube-embed-container {
    max-width: 100px; /* Adjust this value (e.g., 400px, 600px) as needed */
    width: 100%; /* Ensure it's responsive up to the max limit */
    margin-bottom: 10px; /* Add separation below the video */
}
/* THE FINAL STAIRCASE FIX */
/* This forces every comment to stay at full width even if nested */
.comments-list-section, 
.comment-item, 
.reply-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* This removes all those extra lines on the sides */
.comment-item .comment-item, 
.comment-item .reply-item,
.reply-item .reply-item {
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #eee !important; /* Adds a simple line between comments instead */
    box-shadow: none !important;
}
/* THE ACTUAL STAIRCASE KILLER */
.comment-item, .reply-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* This stops the "shrinking" by forcing the box to ignore parent padding */
    padding-left: 10px !important; 
    padding-right: 10px !important;
    width: auto !important; 
    display: block !important;
    position: relative !important;
    left: 0 !important;
    border-left: 1px solid #eee !important; /* Single thin line for neatness */
    border-right: none !important;
}

/* This removes the "Wall of Lines" on the left */
.comment-item .comment-item, 
.reply-item .reply-item {
    border-left: none !important;
}
/* FORCE ALL COMMENTS TO BE INDEPENDENT AND FULL WIDTH */
.comment-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 900px !important; /* Matches your .wrapper width */
    display: block !important;
    position: relative !important;
    left: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #ddd !important; /* Simple border instead of stacked lines */
    margin-top: 15px !important;
}

/* KILL THE NESTING EFFECT */
.comment-item .comment-item {
    padding-left: 0 !important;
    border-left: none !important;
}
/* The background overlay */
#loading-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    text-align: center;
    padding-top: 20%;
}

/* The actual spinning circle */
.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* added the below part from profile here Jan 16 2026 */
/* --- UPDATED CSS FOR BANNER AND PROFILE LAYOUT --- */
/* (Banner styles remain the same for structure) */
.profile-header-area {
    position: relative;
    width: 100%;
    padding-top: 10px;
    margin-bottom: 80px; 
}

.banner-image-container {
    width: 100%;
    height: 250px; 
    overflow: hidden;
    background-color: #f0f0f0; 
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Profile Picture Container - The Circle */
.profile-picture-container {
    position: absolute;
    bottom: -60px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    
    width: 150px; 
    height: 150px;
    border-radius: 50%; /* Keep this for fallback compatibility */
    
    /* CRITICAL FIX: The clip-path creates a much cleaner circular mask */
    clip-path: circle(50% at 50% 50%); 
    
    /* Ensure no visual bleed from the background layer */
    overflow: hidden; 
    
    border: 6px solid #ffffff; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    
    background-image: url('<?php echo $banner_src; ?>'); 
    background-size: cover; 
    background-position: center; 
    background-clip: padding-box; 
}

/* Profile Picture - The actual <img> tag */
.wrapper .profile-picture-container .profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 1;
    display: block; 
    z-index: 11; 

    /* Keep hardware acceleration active */
    transform: translateZ(0); 
}
/* END OF UPDATED CSS */
/* added the above part from profile here Jan 16 2026 */

/* Jan21_2026Container for the bell and dot */
.alert-bell-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-left: 10px;
}

/* The Animated Green Dot */
.pulse-dot {
    position: absolute;
    top: -2px;
    right: -5px;
    width: 10px;
    height: 10px;
    background-color: #28a745; /* Green */
    border-radius: 50%;
    animation: pulse-animation 1.5s infinite ease-in-out;
}

/* The "Getting Smaller and Bigger" Animation */
@keyframes pulse-animation {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
    100% {
        transform: scale(0.8);
        opacity: 1;
    }
}

/* Keep your dropdown content styles as they are */
.bell-dropdown-content {
    /* ... your existing styles for the hover box ... */
}
/* ...EndofaddedJan21 your existing styles for the hover box ... */