/* ===================================================
   File: profile.css
   Description: Styles specific to the new world-class Profile Page.
   =================================================== */

/* --- Main Page Layout --- */
.profile-page-v3 .profile-grid-container {
    display: grid;
    grid-template-columns: 320px 1fr; /* Sidebar width adjusted for better spacing */
    gap: 30px;
    align-items: flex-start;
}

.profile-sidebar .profile-widget {
    margin-bottom: 30px;
}
.profile-sidebar .widget-title {
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-text);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

/* --- Left Sidebar: Profile Info Card --- */
.profile-avatar-wrapper {
    text-align: center;
    margin-bottom: 15px;
}
.profile-avatar-wrapper img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 5px solid var(--accent-cyan);
    object-fit: cover;
    box-shadow: 0 5px 20px rgba(51, 213, 229, 0.2);
}
.profile-name-main {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
}
.profile-headline {
    text-align: center;
    color: var(--secondary-text);
    font-size: 1rem;
    margin-bottom: 15px;
}
.profile-location-info {
    text-align: center;
    color: var(--secondary-text);
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.profile-location-info i {
    margin-right: 8px;
    color: var(--accent-cyan);
}
.profile-stats-inline {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    font-size: 1rem;
}
.profile-stats-inline a {
    color: var(--primary-text);
    text-decoration: none;
}
.profile-stats-inline a:hover {
    text-decoration: underline;
    color: var(--accent-cyan);
}
.profile-stats-inline strong {
    font-weight: 600;
    margin-right: 5px;
}

.profile-actions-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profile-actions-sidebar button {
    width: 100%;
    padding: 12px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-tertiary {
    background: var(--dark-blue);
    color: var(--secondary-text);
    border: 1px solid var(--border-color);
}
.btn-tertiary:hover {
    background: var(--border-color);
    color: var(--primary-text);
}
button.following-btn {
    background-color: transparent;
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
}
button.following-btn:hover {
    background-color: rgba(51, 213, 229, 0.1);
}

/* --- Left Sidebar: About & Skills Card --- */
.profile-bio-text {
    color: var(--secondary-text);
    line-height: 1.8;
    font-size: 0.95rem;
}
.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.skill-tag {
    background: var(--dark-blue);
    color: var(--accent-cyan);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

/* --- Right Column: Main Content --- */

/* --- 🚀 FIXED: SLIDING TABS (Instagram Style) --- */
.profile-tabs-container {
    width: 100%;
    overflow: hidden; /* বাইরের স্ক্রলবার লুকানোর জন্য */
    background: transparent !important;
    padding-bottom: 5px;
    border: none !important; /* বর্ডার রিমুভ */
    box-shadow: none !important; /* শ্যাডো রিমুভ */
}

/* স্লাইডিং লজিক */
.profile-tabs {
    display: flex;
    flex-wrap: nowrap; /* ভাঙবে না, এক লাইনে থাকবে */
    overflow-x: auto; /* হরাইজন্টাল স্ক্রল */
    gap: 15px;
    padding: 10px 5px;
    background: transparent !important; /* ব্যাকগ্রাউন্ড রিমুভ */
    border: none !important;
    justify-content: flex-start; /* শুরু থেকে শুরু হবে */
    
    /* স্ক্রলবার লুকানো (Modern Browsers) */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    
    /* Smooth Scroll */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Chrome/Safari তে স্ক্রলবার লুকানো */
.profile-tabs::-webkit-scrollbar {
    display: none;
}

.profile-tab-btn {
    flex: 0 0 auto; /* বাটনগুলো ছোট হবে না */
    white-space: nowrap; /* টেক্সট ভাঙবে না */
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #ccc;
    transition: 0.3s;
    box-shadow: none !important;
}

.profile-tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.profile-tab-btn.active {
    background: var(--neon-cyan); /* Active কালার */
    color: #000;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.4) !important;
    border-color: var(--neon-cyan) !important;
    transform: scale(1.05);
}

.profile-tab-content {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* --- Post Card Grid Styling --- */
.profile-post-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--dark-blue);
    aspect-ratio: 4 / 3;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.profile-post-card .post-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.profile-post-card:hover .post-card-img {
    transform: scale(1.08);
}
.profile-post-card .post-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 50px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 20%, transparent);
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.profile-post-card:hover .post-card-overlay {
    opacity: 1;
    transform: translateY(0);
}
.profile-post-card .post-card-overlay p {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.5;
}
.profile-post-card .post-card-stats {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: #ddd;
}
.post-card-stats i {
    margin-right: 5px;
}

/* --- General messages --- */
.info-message, .error-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--secondary-text);
    font-size: 1.1rem;
}
.error-message {
    color: var(--accent-pink);
    font-weight: 500;
}

/* --- Responsive adjustments for new Profile --- */
@media (max-width: 992px) {
    .profile-page-v3 .profile-grid-container {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .profile-name-main {
        font-size: 1.6rem;
    }
    .profile-tabs {
        gap: 20px;
    }
    .profile-tab-btn {
        font-size: 0.9rem;
    }
}
/* ===================================================
   NEW STYLES FOR EDIT PROFILE MODAL
   =================================================== */

.profile-edit-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}
.profile-edit-modal .modal-header h3 {
    margin: 0;
}
.profile-edit-modal .modal-body {
    padding: 20px;
}
.profile-edit-modal .form-group {
    margin-bottom: 20px;
}
.profile-edit-modal .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary-text);
}
.profile-edit-modal .form-group input[type="text"],
.profile-edit-modal .form-group textarea {
    width: 100%;
    background: var(--dark-blue);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 15px;
    color: var(--primary-text);
    font-size: 1rem;
}
.profile-edit-modal .form-group input[type="text"]:focus,
.profile-edit-modal .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
}
.profile-edit-modal .form-actions {
    text-align: right;
    margin-top: 30px;
}
.profile-edit-modal .form-actions .btn {
    padding: 12px 30px;
}
.spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 8px;
    vertical-align: middle;
}
.profile-email {
    font-size: 0.9rem;
    margin-bottom: 10px;
}
/* --- Styles for Large Verified Badge on Profile Page --- */
.verified-badge-large {
    display: inline-flex;
    align-items: center;
    background-color: rgba(51, 213, 229, 0.1);
    color: var(--accent-cyan);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px; /* Space below the name */
    margin-bottom: 5px; /* Space above the headline */
}

.verified-badge-large i {
    margin-right: 8px;
    font-size: 1rem;
}

/* Optional: To align the location info better */
.profile-location-info {
    margin-top: 15px;
}

/* --- Styles for Pinned Post on Profile Page (IMPROVED) --- */
#pinned-post-container {
    background: linear-gradient(135deg, rgba(51, 213, 229, 0.05), rgba(0, 0, 0, 0.1));
    border: 1px solid var(--accent-cyan);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px; /* Space between pinned post and tabs */
}

#pinned-post-container .pinned-badge {
    color: var(--accent-cyan);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

#pinned-post-container .pinned-badge i {
    margin-right: 8px;
    font-size: 1rem;
}

/* We will embed the standard post card inside the pinned container */
#pinned-post-container .feed-post {
    padding: 0;
    border: none;
    background: none;
    margin: 0;
    box-shadow: none;
}
/* --- Styles for Profile Level & Points --- */
.profile-level-progress {
    margin-bottom: 25px;
}
.level-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
}
.level-name {
    font-weight: 600;
    color: var(--primary-text);
}
.level-points {
    color: var(--secondary-text);
}
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--dark-blue);
    border-radius: 4px;
}
.progress-bar {
    height: 100%;
    background-color: var(--accent-cyan);
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

/* --- Styles for Badges --- */
.badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    text-align: center;
}
.badge-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: var(--accent-cyan);
    border: 1px solid var(--border-color);
}
.badge-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--secondary-text);
    line-height: 1.3;
}

/* ===================================================
   🚀 WORLD CLASS UI UPGRADE (V4.0)
   =================================================== */

/* 1. Immersive Hero Banner (Parallax) */
.profile-hero-banner {
    position: relative;
    height: 350px; /* Big Banner */
    width: 100%;
    overflow: hidden;
    margin-bottom: -80px; /* Overlap Effect তৈরি করার জন্য */
    z-index: 1;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Parallax Effect (JS দিয়ে কন্ট্রোল হবে, আপাতত CSS) */
    transform: scale(1.1); 
    transition: transform 0.5s ease-out;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(5, 5, 17, 1)); /* Fade to dark */
    z-index: 2;
}

/* 2. Dynamic Avatar (Glowing Ring & Overlap) */
.profile-sidebar {
    position: relative;
    z-index: 10; /* ব্যানারের উপরে থাকবে */
}

.profile-avatar-wrapper {
    position: relative;
    margin-top: -60px; /* ব্যানারের ভেতরে ঢুকে যাবে */
    display: inline-block;
}

.profile-avatar-wrapper img {
    width: 160px;
    height: 160px;
    border: 4px solid #0f1020; /* ব্যাকগ্রাউন্ডের সাথে ব্লেন্ড হওয়ার জন্য */
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.4); /* Neon Glow */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.profile-avatar-wrapper img:hover {
    transform: scale(1.05) rotate(3deg); /* 3D Tilt Effect */
    border-color: var(--accent-cyan);
}

/* 3. Glassmorphism 2.0 (Cards) */
.profile-widget.card, .profile-tabs-container.card {
    background: rgba(20, 20, 35, 0.6) !important; /* Semi-transparent */
    backdrop-filter: blur(15px); /* ব্লার ইফেক্ট */
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* সূক্ষ্ম বর্ডার */
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    border-radius: 20px;
}

/* 4. Smart Sticky Sidebar */
.profile-sidebar {
    /* স্টিকি হওয়ার জন্য */
    position: sticky;
    top: 100px; /* হেডার থেকে একটু নিচে */
    height: fit-content;
}

/* 5. Floating Navigation Pills */
.profile-tabs {
    background: rgba(255, 255, 255, 0.03);
    padding: 8px;
    border-radius: 50px; /* ক্যাপসুল শেপ */
    border: 1px solid rgba(255,255,255,0.05);
    justify-content: space-around;
    margin-bottom: 25px;
}

.profile-tab-btn {
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    color: var(--secondary-text);
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.profile-tab-btn.active {
    background: linear-gradient(135deg, var(--accent-cyan), #00a8ff);
    color: #000;
    box-shadow: 0 4px 15px rgba(0, 242, 255, 0.4);
    border-bottom: none; /* আগের বর্ডার রিমুভ */
}

/* 6. Masonry Grid Layout (Pinterest Style) */
.profile-tab-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    /* Masonry লজিক সাধারণত JS দিয়ে ভালো হয়, কিন্তু CSS Grid দিয়েও বেসিক স্ট্রাকচার করা যায় */
    grid-auto-rows: minmax(100px, auto);
}

.profile-post-card {
    break-inside: avoid; /* কলামের মাঝখানে ভাঙবে না */
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    z-index: 5;
}

/* ===================================================
   🚀 PART 2: UX LAYOUT UPGRADES
   =================================================== */

/* 1. Smart Sticky Sidebar */
.profile-sidebar {
    position: sticky;
    top: 100px; /* হেডার থেকে ১০০ পিক্সেল নিচে ফিক্সড থাকবে */
    height: fit-content; /* সাইডবারের উচ্চতা কনটেন্ট অনুযায়ী হবে */
    z-index: 10;
    transition: top 0.3s ease;
}

/* মোবাইল ভিউতে স্টিকি বন্ধ রাখা ভালো */
@media (max-width: 991px) {
    .profile-sidebar {
        position: relative;
        top: 0;
    }
}

/* 2. Floating Navigation Pills (Capsule Style) */
.profile-tabs {
    border-bottom: none; /* পুরনো বর্ডার রিমুভ */
    background: rgba(255, 255, 255, 0.05); /* হালকা ব্যাকগ্রাউন্ড */
    padding: 10px;
    border-radius: 50px; /* ক্যাপসুল শেপ */
    justify-content: center; /* মাঝখানে থাকবে */
    gap: 15px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.profile-tab-btn {
    border-bottom: none !important; /* পুরনো স্টাইল রিমুভ */
    padding: 10px 25px;
    border-radius: 30px; /* গোল বাটন */
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--secondary-text);
    transition: all 0.3s ease;
    background: transparent;
}

.profile-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.profile-tab-btn.active {
    background: linear-gradient(135deg, var(--accent-cyan), #00a8ff); /* নিয়ন গ্রেডিয়েন্ট */
    color: #000; /* কালো টেক্সট যাতে পড়া যায় */
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.4); /* গ্লো ইফেক্ট */
    transform: scale(1.05); /* একটু বড় হবে */
}

/* 3. Masonry Grid Layout Setup */
.profile-tab-content {
    /* CSS Grid দিয়ে Masonry-এর মতো লুক */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 10px; /* Row height ছোট করা যাতে আইটেমগুলো গ্যাপ ছাড়া বসে */
    gap: 0 20px; /* শুধু কলাম গ্যাপ থাকবে */
}

.profile-post-card {
    margin-bottom: 20px; /* নিচে গ্যাপ */
    break-inside: avoid; /* আইটেম ভাঙবে না */
    /* Masonry আইটেম স্টাইলিং */
    grid-row-end: span 30; /* ডিফল্ট হাইট (JS দিয়ে অ্যাডজাস্ট হবে) */
}

/* Video Bio Button Style */
.video-bio-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-pink); /* পিংক কালার */
    border: 3px solid #0f1020; /* ব্যাকগ্রাউন্ড কালার বর্ডার */
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s;
    z-index: 5;
}

.video-bio-btn:hover {
    transform: scale(1.1);
    background: #ff3377;
}

/* 3D Badge Style */
.badge-icon {
    /* পুরনো স্টাইল আপডেট */
    background: radial-gradient(circle at 30% 30%, #ffffff, #b0b0b0); /* মেটালিক লুক */
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.5);
    transition: transform 0.5s ease;
    perspective: 1000px;
}

.badge-item:hover .badge-icon {
    transform: rotateY(180deg) scale(1.2); /* মাউস নিলে ঘুরবে */
    box-shadow: 0 0 25px var(--accent-cyan); /* গ্লো করবে */
}

.badge-icon i {
    color: #333; /* মেটালের ওপর ডার্ক আইকন */
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Fix for Pinned Post visibility on Profile Page */
#pinned-post-container .feed-post {
    content-visibility: visible !important; /* অটো রেন্ডারিং ফোর্স করা */
    contain-intrinsic-size: unset !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===================================================
   🚀 WORLD CLASS UI UPGRADE (V5.0 - FINAL POLISH)
   =================================================== */

/* 1. Immersive Hero Banner (Fixed & Bigger) */
.profile-hero-banner {
    position: relative;
    height: 450px; /* উচ্চতা বাড়ানো হলো */
    width: 100%;
    overflow: hidden;
    margin-top: -100px; /* হেডার ট্রান্সপারেন্ট করার জন্য উপরে টানা হলো */
    z-index: 0;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%); /* নিচে ফেড ইফেক্ট */
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05); /* হালকা জুম */
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(5,5,17,0.3), rgba(5,5,17,0.9)); /* সিনেমাটিক শ্যাডো */
    z-index: 1;
}

/* 2. Container Layout Fix */
.profile-grid-container {
    display: grid;
    grid-template-columns: 350px 1fr; /* সাইডবার একটু চওড়া */
    gap: 40px;
    position: relative;
    z-index: 2; /* ব্যানারের উপরে থাকবে */
    margin-top: -120px; /* কভারের ওপর ওভারল্যাপ */
    padding-bottom: 50px;
}

/* 3. Glassmorphism Sidebar (The Game Changer) */
.profile-sidebar .profile-widget.card {
    background: rgba(20, 20, 35, 0.4) !important; /* আরও ট্রান্সপারেন্ট */
    backdrop-filter: blur(20px) saturate(180%); /* অ্যাপল স্টাইল ব্লার */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important; /* উপরের বর্ডার উজ্জ্বল */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* ডিপ শ্যাডো */
    border-radius: 24px;
    padding: 30px;
}

/* 4. Avatar (Hero Look) */
.profile-avatar-wrapper {
    text-align: center;
    margin-top: -80px; /* কার্ড থেকে অর্ধেক বাইরে থাকবে */
    position: relative;
    margin-bottom: 20px;
}

.profile-avatar-wrapper img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 4px solid #0f1020; /* বডি কালারের সাথে ম্যাচ */
    padding: 3px;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); /* গ্রেডিয়েন্ট বর্ডার */
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.3); /* গ্লো */
}

/* 5. Typography & Stats */
.profile-name-main {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, #fff, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

.profile-headline {
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.profile-stats-inline {
    background: rgba(255,255,255,0.03);
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* 6. Buttons (Neon Style) */
.profile-actions-sidebar button {
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.edit-profile-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
}

.edit-profile-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.2);
}

/* 7. Navigation Pills (Floating) */
.profile-tabs-container {
    background: transparent !important; /* কন্টেইনার ইনভিজিবল */
    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

.profile-tabs {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 8px;
    margin-bottom: 30px;
    display: inline-flex; /* সেন্টারে আনার জন্য */
    border: 1px solid rgba(255,255,255,0.1);
}

.profile-tab-btn.active {
    background: #00f2ff;
    color: #000;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
}

/* 8. Masonry Post Cards (Clean Look) */
.profile-post-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.05);
}

.profile-post-card img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.profile-post-card:hover img {
    transform: scale(1.1);
}

/* 9. Pinned Post (Highlight) */
#pinned-post-container {
    background: linear-gradient(135deg, rgba(0, 242, 255, 0.05), rgba(189, 0, 255, 0.05));
    border: 1px solid rgba(0, 242, 255, 0.3);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.1);
}

/* Mobile Fix */
@media (max-width: 991px) {
    .profile-hero-banner { height: 300px; margin-top: -80px; }
    .profile-grid-container { grid-template-columns: 1fr; margin-top: -60px; }
    .profile-avatar-wrapper { margin-top: -50px; }
    .profile-sidebar .profile-widget.card { padding: 20px; }
}

/* মেইন ইনফো কার্ডের জন্য স্পেশাল প্যাডিং */
.profile-sidebar .main-info-card {
    padding-top: 0 !important; /* যাতে ছবিটা উপরে উঠে যায় */
    overflow: visible !important; /* ছবি কেটে না যায় */
}

/* --- Optimized Masonry Grid Layout --- */
.profile-tab-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 1px; /* Precise height calculation */
    gap: 0 20px; /* Column gap only */
    opacity: 0; /* Hidden initially to prevent ugly jump */
    transition: opacity 0.3s ease-in;
}

/* Post Card Optimization */
.profile-post-card {
    margin-bottom: 20px;
    break-inside: avoid;
    background-color: var(--dark-blue);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    /* Hardware Acceleration for smoother rendering */
    transform: translateZ(0); 
    will-change: transform;
}

/* Image Optimization & Aspect Ratio */
.profile-post-card .post-card-img {
    width: 100%;
    height: auto; /* Allow height to adjust based on aspect ratio */
    display: block;
    /* Placeholder color while loading */
    background-color: #1e293b; 
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Load More / Infinite Scroll Spinner */
#load-more-trigger {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: var(--secondary-text);
    font-weight: 500;
}

/* --- FIX: Profile Picture & Grid Visibility --- */

/* 1. Profile Avatar Fix */
.profile-avatar-wrapper img {
    opacity: 1 !important; /* এটা অদৃশ্য হওয়া আটকাবে */
    visibility: visible !important;
    background-color: transparent !important; /* ব্যাকগ্রাউন্ড কালার সরাবে */
    transform: none !important; /* প্যারালাক্স ইফেক্ট থেকে বাঁচাবে */
}

/* 2. Tab Content Visibility Fix */
/* পোস্ট লোড হওয়ার পর যাতে সাথে সাথে দেখা যায় */
.profile-tab-content {
    opacity: 1 !important; 
    transition: none !important;
}

/* 3. Post Image Fix */
.profile-post-card .post-card-img {
    opacity: 1 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================================================
   🚀 WORLD CLASS PROFILE SIDEBAR DESIGN (V8.0)
   =================================================== */

/* 1. Base Card Styling (Glassmorphism Pro) */
.profile-sidebar .profile-widget.card {
    background: rgba(18, 18, 35, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-radius: 24px;
    padding: 0; /* প্যাডিং রিসেট, কন্টেন্টের ভেতর প্যাডিং দেব */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-sidebar .profile-widget.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 242, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 2. Premium Profile Card (Main) */
.premium-profile-card {
    text-align: center;
    padding-bottom: 25px !important;
}

/* Decorative Mini Banner */
.card-mini-banner {
    height: 110px;
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
    position: relative;
}
.card-mini-banner::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.3;
}

/* Avatar Styling (Floating 3D) */
.profile-avatar-wrapper {
    position: relative;
    margin-top: -65px; /* Pull up into banner */
    display: inline-block;
    margin-bottom: 10px;
}

.avatar-ring {
    padding: 4px;
    background: rgba(18, 18, 35, 1); /* Matches card bg */
    border-radius: 50%;
    display: inline-block;
}

.profile-avatar-wrapper img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.profile-avatar-wrapper:hover img {
    transform: scale(1.05) rotate(2deg);
    border-color: var(--accent-cyan);
}

/* Online Status Dot */
.online-status-indicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    background: #00ff88;
    border: 3px solid #121223;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
}

/* Video Bio Button (Floating) */
.video-bio-btn {
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ff0055, #ff00cc);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #121223;
    box-shadow: 0 5px 15px rgba(255, 0, 85, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}
.video-bio-btn:hover { transform: scale(1.2); }

/* 3. Typography & Identity */
.profile-identity {
    padding: 0 20px;
}

.profile-name-main {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.profile-headline {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 8px;
}

/* Location Chip */
.location-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.1);
}
.location-chip i { color: #ff4757; }

/* Verified Pill */
.verified-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 242, 255, 0.1);
    color: var(--accent-cyan);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* 4. Premium Stats Grid */
.profile-stats-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 25px 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 15px 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}

.stat-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.stat-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
}

/* 5. Gamification (Level Bar) */
.level-container {
    padding: 0 25px;
    margin-bottom: 25px;
}

.level-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.current-level-badge {
    color: #FFD700; /* Gold */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.next-level-info {
    color: #64748b;
    font-size: 0.75rem;
}

.level-progress-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.level-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD700, #ffaa00);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    transition: width 1s ease-in-out;
}

/* 6. Buttons Styling */
.profile-actions-sidebar {
    padding: 0 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-actions-sidebar button {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Primary Button (Follow/Edit) */
.profile-actions-sidebar .btn, 
.profile-actions-sidebar .btn-secondary {
    background: var(--accent-cyan);
    color: #000;
    box-shadow: 0 4px 15px rgba(0, 242, 255, 0.3);
}
.profile-actions-sidebar .btn:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

/* Secondary Button (Message) */
.profile-actions-sidebar .btn-tertiary {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.profile-actions-sidebar .btn-tertiary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* 7. Detail Widgets (About, Skills) */
.detail-widget {
    padding: 25px !important;
}

.widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.widget-title i { color: var(--accent-cyan); }

.profile-bio-text {
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.6;
}

/* Professional Info Box */
.pro-info-box {
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 15px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.info-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.info-row:last-child { margin-bottom: 0; }

.info-row i {
    width: 32px; height: 32px;
    background: rgba(0, 242, 255, 0.1);
    color: var(--accent-cyan);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
}

.info-row div { display: flex; flex-direction: column; }
.info-row strong { font-size: 0.75rem; color: #64748b; text-transform: uppercase; }
.info-row span, .info-row a { font-size: 0.9rem; color: #fff; text-decoration: none; }
.info-row a:hover { color: var(--accent-cyan); text-decoration: underline; }

/* Skills Tags */
.skill-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}
.skill-tag:hover {
    background: var(--accent-cyan);
    color: #000;
    border-color: var(--accent-cyan);
}

/* ===================================================
   💎 WORLD CLASS PROFILE SIDEBAR (V-NEXT)
   =================================================== */

:root {
    --glass-bg: rgba(20, 20, 35, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --neon-cyan: #00f2ff;
    --neon-purple: #bd00ff;
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --gradient-primary: linear-gradient(135deg, #00f2ff 0%, #0099ff 100%);
}

/* 1. Main Glass Card Container */
.profile-glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 30px 20px;
    margin-bottom: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.profile-glass-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

/* Top Decoration (Optional Light Leak Effect) */
.profile-glass-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 242, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* 2. Glowing Avatar */
.profile-avatar-section {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    z-index: 1;
}

.avatar-glow-ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(45deg, var(--neon-cyan), var(--neon-purple));
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.3);
    position: relative;
}

.avatar-glow-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #0f1020; /* Matches dark background */
}

.online-status {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: #00ff88;
    border: 3px solid #0f1020;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
}

/* Floating Play Button */
.video-bio-btn.floating-btn {
    position: absolute;
    bottom: 0;
    right: 25%;
    width: 35px;
    height: 35px;
    background: var(--neon-purple);
    border: 2px solid #fff;
    box-shadow: 0 5px 15px rgba(189, 0, 255, 0.5);
    z-index: 10;
}

/* 3. User Identity & Typography */
.profile-identity {
    text-align: center;
    position: relative;
    z-index: 1;
}

.profile-name-hero {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #fff, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badges-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.badge-pill {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-pill.verified {
    background: rgba(0, 242, 255, 0.1);
    color: var(--neon-cyan);
    border: 1px solid rgba(0, 242, 255, 0.3);
}

.badge-pill.level-pill {
    background: rgba(189, 0, 255, 0.1);
    color: var(--neon-purple);
    border: 1px solid rgba(189, 0, 255, 0.3);
}

.profile-headline-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 10px;
    line-height: 1.4;
}

.location-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.location-chip i { color: var(--neon-cyan); }

/* 4. Stats Grid */
.profile-stats-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 15px 10px;
    margin: 25px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-box {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    display: block;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
}

.divider-vertical {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
}

/* 5. Gamification Bar (HUD Style) */
.xp-container {
    margin-bottom: 25px;
}

.xp-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}

.xp-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.xp-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--neon-cyan);
    transition: width 1s ease-in-out;
}

/* 6. Buttons & Actions */
.profile-actions-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-neon-primary, .profile-actions-sidebar button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--gradient-primary);
    color: #000;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-neon-primary:hover, .profile-actions-sidebar button:hover {
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.6);
    transform: scale(1.02);
}

/* Secondary Button Style Override */
button.following-btn, button.btn-tertiary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}
button.following-btn:hover {
    border-color: var(--neon-cyan) !important;
    color: var(--neon-cyan) !important;
}

/* 7. Social Row */
.profile-social-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.social-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    transition: all 0.3s;
    font-size: 0.9rem;
    text-decoration: none;
}

.social-icon-btn:hover {
    background: var(--neon-cyan);
    color: #000;
    transform: translateY(-3px);
}

/* 8. Skills Cloud (Glass Card 2) */
.glass-card-title {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.glass-card-title i { color: var(--neon-cyan); }

.profile-bio-text {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.6;
}

.separator-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

.skills-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-tag {
    background: rgba(0, 242, 255, 0.08) !important;
    border: 1px solid rgba(0, 242, 255, 0.2) !important;
    color: var(--neon-cyan) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    transition: all 0.2s;
}

.skill-tag:hover {
    background: rgba(0, 242, 255, 0.2) !important;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .profile-glass-card {
        padding: 20px;
    }
    .profile-name-hero {
        font-size: 1.5rem;
    }
    .profile-stats-grid {
        gap: 5px;
    }
}

/* ✅ FIX: Floating Play Button Position */
.video-bio-btn.floating-btn {
    position: absolute;
    bottom: 5px; /* রিংয়ের একটু উপরে */
    right: 15px; /* একটু ডানে */
    width: 35px;
    height: 35px;
    background: var(--neon-purple);
    border: 2px solid #fff;
    border-radius: 50%; /* গোল বাটন */
    box-shadow: 0 5px 15px rgba(189, 0, 255, 0.6);
    z-index: 100; /* সবার উপরে থাকার জন্য */
    display: flex; /* আইকন সেন্টারে আনার জন্য */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-bio-btn.floating-btn:hover {
    transform: scale(1.1);
    background: #d946ef; /* হোভারে কালার চেঞ্জ */
}

.video-bio-btn.floating-btn i {
    color: #fff;
    font-size: 0.9rem;
    margin-left: 2px; /* প্লে আইকন ভিজ্যুয়ালি সেন্টারে আনার জন্য */
}

/* --- FIX: Video Bio Button & Badges (Paste at the bottom of profile.css) --- */

/* 1. Video Play Button Fix */
.profile-avatar-section {
    overflow: visible !important; /* বাটন কেটে যাওয়া আটকাবে */
}

.video-bio-btn.floating-btn {
    display: flex !important; /* ফোর্স করে শো করা */
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 5px; 
    right: 5px; /* পজিশন ঠিক করা হলো */
    width: 45px !important; /* সাইজ বড় করা হলো */
    height: 45px !important;
    background: linear-gradient(135deg, #ff0055, #ff00cc); /* সুন্দর গ্র্যাডিয়েন্ট */
    border: 3px solid #0f1020; /* রিং এফেক্ট */
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(255, 0, 85, 0.5);
    z-index: 100; /* সবার উপরে থাকার জন্য */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.video-bio-btn.floating-btn:hover {
    transform: scale(1.15);
}

/* 2. Verified Badge Visibility Fix */
.badge-pill.verified {
    background: rgba(0, 242, 255, 0.15) !important; /* ব্যাকগ্রাউন্ড একটু গাঢ় */
    color: #00f2ff !important; /* টেক্সট নিয়ন সায়ান */
    border: 1px solid rgba(0, 242, 255, 0.5) !important;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 242, 255, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* 3. Admin Badge Style (New) */
.badge-pill.admin-badge {
    background: linear-gradient(90deg, #ff0055, #bd00ff) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 0 10px rgba(189, 0, 255, 0.4);
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    text-transform: uppercase;
}

/* --- NEW: Scrollable Tabs Fix --- */
.profile-tabs-wrapper::-webkit-scrollbar {
    height: 4px;
}
.profile-tabs-wrapper::-webkit-scrollbar-thumb {
    background: var(--accent-cyan);
    border-radius: 4px;
}
.profile-tab-btn i {
    margin-right: 5px;
}

/* --- NEW: Reviews Section Styles --- */
.review-stats-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}
.review-rating-big {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffc107;
}
.review-stars {
    color: #ffc107;
    font-size: 1.2rem;
    margin: 5px 0;
}

/* Review Form */
.add-review-box {
    background: var(--dark-blue);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    border: 1px solid var(--accent-cyan);
}
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 15px;
}
.star-rating-input input { display: none; }
.star-rating-input label {
    font-size: 1.5rem;
    color: #444;
    cursor: pointer;
    transition: color 0.2s;
}
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
    color: #ffc107;
}

/* Review Item */
.review-item {
    background: rgba(20, 20, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
}
.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.reviewer-info { display: flex; gap: 10px; align-items: center; }
.reviewer-info img { width: 35px; height: 35px; border-radius: 50%; }
.review-date { font-size: 0.75rem; color: #aaa; }

/* --- FIX 1: Masonry Overlap Issue Solution --- */
.profile-tab-content {
    /* প্রথমে অপাসিটি ০ থাকবে, JS দিয়ে ইমেজ লোড হলে ১ হবে */
    opacity: 0; 
    transition: opacity 0.4s ease-in-out;
    
    /* কলাম গ্যাপ ফিক্স */
    column-gap: 20px; 
}

/* যখন লোড কমপ্লিট হবে তখন এই ক্লাসটি JS অ্যাড করবে */
.profile-tab-content.loaded {
    opacity: 1;
}

.profile-post-card {
    /* কার্ড যাতে ভেঙে না যায় */
    display: inline-block; 
    width: 100%;
    margin-bottom: 20px;
    break-inside: avoid; /* অত্যন্ত গুরুত্বপূর্ণ লাইন */
    -webkit-column-break-inside: avoid;
    vertical-align: top;
    
    /* স্মুথ লোডিং */
    transform: translateZ(0); 
    backface-visibility: hidden;
}

/* --- NEW: Sub-Filter Button Styles --- */
.sub-filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--secondary-text);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sub-filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sub-filter-btn.active {
    background: var(--accent-cyan); /* Cyan Color */
    color: #000;
    border-color: var(--accent-cyan);
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
}

/* ===================================================
   🚀 FIXED: VIDEO PLAY BUTTON (CENTERED BELOW LOCATION)
   =================================================== */

/* 1. Profile Avatar Section Reset (Logo Centering Fix) */
.profile-avatar-section {
    position: relative;
    display: block; /* আগে inline-block ছিল, এখন block করা হলো যাতে সেন্টার থাকে */
    margin: 0 auto 10px; /* লোগোকে মাঝখানে রাখার জন্য */
    text-align: center; /* কন্টেন্ট সেন্টারে */
    width: 100%; /* পুরো জায়গা নেবে */
}

/* 2. Video Play Button (New Position: Below Location) */
/* বাটনটি এখন আর অ্যাবসলিউট পজিশনে নেই, এটি ফ্লো-এর মধ্যে থাকবে */
.video-bio-btn.floating-btn {
    position: relative !important; /* রিলেটিভ করা হলো */
    margin: 15px auto 10px !important; /* উপরে-নিচে গ্যাপ এবং মাঝখানে */
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    
    width: 45px !important;
    height: 45px !important;
    
    background: linear-gradient(135deg, #ff0055, #ff00cc); /* Pink Gradient */
    border: 3px solid rgba(255, 255, 255, 0.1); /* হালকা বর্ডার */
    border-radius: 50%;
    color: #fff;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    
    box-shadow: 0 5px 20px rgba(255, 0, 85, 0.6); /* Glow Effect */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: pulseBtn 2s infinite; /* নতুন পালস অ্যানিমেশন */
    z-index: 10;
}

/* Hover Effect */
.video-bio-btn.floating-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 10px 30px rgba(255, 0, 85, 0.8);
}

/* Pulse Animation (সেন্টারে ভালো দেখাবে) */
@keyframes pulseBtn {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 0, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0); }
}

/* 3. Sidebar Rating Box (Gold Style - Unchanged) */
.sidebar-rating-box {
    margin-top: 5px;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 6px 14px;
    border-radius: 20px;
}

.sidebar-rating-text {
    font-weight: 800;
    color: #ffd700;
    font-size: 0.9rem;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.sidebar-review-count {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ===================================================
   🚀 FINAL FIX: PROFILE CUT-OFF & CENTERING
   =================================================== */

/* 1. Card Overflow Fix (MOST IMPORTANT) */
/* এই অংশটি ছবি কেটে যাওয়া আটকাবে */
.profile-sidebar .profile-widget.card,
.profile-glass-card {
    overflow: visible !important; /* ছবি কার্ডের বাইরে বের হতে পারবে */
    position: relative !important;
    z-index: 10 !important;
}

/* 2. Profile Avatar Section (Center & Position) */
.profile-avatar-section {
    position: relative;
    /* Flexbox দিয়ে জোর করে মাঝখানে আনা */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    
    /* ছবিটিকে উপরে টেনে তোলা (Overlap) */
    margin-top: -85px !important; 
    margin-bottom: 10px !important;
    z-index: 20 !important; /* ব্যানারের উপরে থাকবে */
}

/* 3. Avatar Ring Fix */
.avatar-glow-ring {
    margin: 0 auto !important;
    display: block !important;
    /* রিংয়ের ব্যাকগ্রাউন্ড যাতে ট্রান্সপারেন্ট না হয়ে যায় */
    background: #0f1020 !important; 
    border-radius: 50%;
}

/* 4. Video Play Button (Location এর নিচে সেন্টারে - UNCHANGED) */
.video-bio-btn.floating-btn {
    position: relative !important;
    margin: 15px auto 20px !important; 
    
    /* Reset Positioning */
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    
    width: 45px !important;
    height: 45px !important;
    
    background: linear-gradient(135deg, #ff0055, #ff00cc);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    
    box-shadow: 0 5px 20px rgba(255, 0, 85, 0.6);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: pulseBtn 2s infinite;
    z-index: 10;
}

/* Pulse Animation */
@keyframes pulseBtn {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 0, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0); }
}

/* ===================================================
   ✅ FIX 1.1: Masonry Layout & Image Overlap (Pure CSS)
   =================================================== */

/* --- Optimized CSS Masonry Layout --- */
.profile-tab-content {
    display: block; /* Grid সরিয়ে Block করা হলো */
    column-count: 3; /* ৩টি কলামে ভাগ হবে (ডেস্কটপ) */
    column-gap: 20px; /* মাঝখানের গ্যাপ */
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* Responsive adjustment for Tablets */
@media (max-width: 992px) {
    .profile-tab-content {
        column-count: 2; /* ট্যাবলেটে ২ কলাম */
    }
}

/* Responsive adjustment for Mobile */
@media (max-width: 576px) {
    .profile-tab-content {
        column-count: 1; /* মোবাইলে ১ কলাম */
    }
}

.profile-post-card {
    margin-bottom: 20px;
    break-inside: avoid; /* কার্ড মাঝখানে ভাঙবে না */
    -webkit-column-break-inside: avoid; /* সাফারির জন্য ফিক্স */
    background-color: var(--dark-blue);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: inline-block; /* কলাম লেআউটের জন্য জরুরি */
    width: 100%;
    transform: translateZ(0);
}

/* --- 🚀 FEATURE 1: Visual Experience Timeline --- */
.visual-timeline {
    position: relative;
    padding-left: 20px;
    margin-top: 15px;
    border-left: 2px solid rgba(0, 242, 255, 0.2);
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
    padding-left: 15px;
}

.timeline-dot {
    position: absolute;
    left: -26px;
    top: 0;
    width: 12px;
    height: 12px;
    background: var(--neon-cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-cyan);
    border: 2px solid #0f1020;
}

.timeline-content {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.company-logo {
    width: 25px;
    height: 25px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 8px;
    vertical-align: middle;
}

.timeline-year {
    font-size: 0.75rem;
    color: var(--neon-purple);
    font-weight: 600;
}

.timeline-thumb {
    width: 100%;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    margin-top: 8px;
    opacity: 0.8;
    transition: 0.3s;
}
.timeline-thumb:hover { opacity: 1; transform: scale(1.02); }

/* --- 🚀 FEATURE 2: Tools Stack & Endorsements --- */
.tools-grid {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.tool-icon {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 8px;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.1);
}
.tool-icon:hover {
    background: rgba(0, 242, 255, 0.1);
    transform: translateY(-3px);
    border-color: var(--neon-cyan);
}

/* Endorsement Pills (Skill Upgrade) */
.skill-tag.endorsed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
}
.endorse-count {
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    color: #fff;
}

/* --- 🚀 FEATURE 3: Case Study Cards --- */
.case-study-card {
    background: var(--dark-blue);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}
.case-study-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

.cs-header {
    position: relative;
    height: 200px;
}
.cs-img { width: 100%; height: 100%; object-fit: cover; }
.cs-badge {
    position: absolute; top: 15px; left: 15px;
    background: var(--neon-pink); color: #fff;
    padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold;
}

.cs-body { padding: 20px; }
.cs-title { color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
.cs-problem { color: #aaa; font-size: 0.9rem; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

.cs-stats {
    display: flex; gap: 15px; margin-top: 15px; padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.cs-stat-item { text-align: center; flex: 1; }
.cs-stat-val { display: block; color: var(--neon-cyan); font-weight: bold; font-size: 1.1rem; }
.cs-stat-lbl { font-size: 0.75rem; color: #666; }

/* --- 🚀 FEATURE 5: 360 VR VIEWER --- */
.vr-container {
    width: 100%;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--neon-cyan);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.2);
}
.vr-overlay-btn {
    position: absolute; bottom: 20px; right: 20px;
    background: rgba(0,0,0,0.7); color: #fff;
    padding: 10px 20px; border-radius: 30px;
    border: 1px solid #fff; cursor: pointer; z-index: 10;
    display: flex; align-items: center; gap: 8px;
}
.vr-overlay-btn:hover { background: var(--neon-cyan); color: #000; }

/* --- 🚀 FIXED: PRICING LAYOUT & UI --- */
.pricing-container {
    display: grid;
    /* কার্ডগুলো যাতে স্ক্রিন থেকে বেরিয়ে না যায় */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px;
    margin-top: 20px;
    padding-bottom: 20px;
    width: 100%; /* ফুল উইডথ */
}

.pricing-card {
    background: #151525; /* একটু সলিড ব্যাকগ্রাউন্ড যাতে পড়া যায় */
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
}

/* ইনপুট ফিল্ড ভিজিবিলিটি ফিক্স */
.calculator-box {
    background: rgba(255, 255, 255, 0.08);
    padding: 15px;
    border-radius: 12px;
    margin-top: 15px;
    border: 1px solid rgba(255,255,255,0.1);
}

.calc-input {
    background: #fff; /* সাদা ব্যাকগ্রাউন্ড */
    color: #000; /* কালো লেখা */
    font-weight: bold;
    border: none;
    padding: 8px;
    width: 90px;
    border-radius: 6px;
    text-align: center;
    font-size: 1rem;
}

/* বাটন ভিজিবিলিটি ফিক্স (World Class) */
.pricing-card .btn-full {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    border-radius: 30px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
    border: none;
    display: block; /* বাটন ডিসপ্লে ফিক্স */
}

/* Silver Button */
.silver .btn-full {
    background: #bdc3c7;
    color: #000;
}
/* Gold Button (Highlighted) */
.gold .btn-full {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #000;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}
/* Platinum Button */
.platinum .btn-full {
    background: linear-gradient(135deg, #00f2ff, #0099ff);
    color: #000;
    box-shadow: 0 5px 15px rgba(0, 242, 255, 0.3);
}

.pricing-card:hover .btn-full {
    transform: scale(1.05);
}

/* --- 🚀 3 TYPES OF USER BADGES (World Class) --- */

/* 1. AGOID Official Employee (Premium Gold/Black Look) */
.badge-agoid-official {
    background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
    color: #000;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    display: inline-flex; align-items: center; gap: 6px;
    border: 2px solid #fff;
}

/* 2. AGOID Freelance Partner (Neon Blue/Cyber Look) */
.badge-agoid-freelance {
    background: rgba(0, 242, 255, 0.1);
    color: #00f2ff;
    border: 1px solid #00f2ff;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex; align-items: center; gap: 5px;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
}

/* 3. Regular User (Subtle Grey) */
.badge-regular-user {
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ID & Experience Styling */
#employee-details-row span { display: inline-block; }

/* --- 🚀 WORLD CLASS IDENTITY CARD --- */

/* 1. Container Box */
.identity-card-box {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin: 0 auto 20px auto;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* Shine Effect */
.identity-card-box::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* 2. Badges (Updated) */
.badge-agoid-official {
    background: linear-gradient(90deg, #FFD700, #FFA500);
    color: #000;
    font-weight: 900;
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    display: inline-block;
    margin-bottom: 15px;
    border: 2px solid rgba(255,255,255,0.5);
}

.badge-agoid-freelance {
    background: linear-gradient(90deg, #00f2ff, #0099ff);
    color: #000;
    font-weight: 800;
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
    display: inline-block;
    margin-bottom: 15px;
}

/* 3. Info Grid (Designation & ID) */
.id-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
    text-align: left;
}

.id-info-item {
    display: flex;
    flex-direction: column;
}

.id-info-item.full-width {
    grid-column: 1 / -1; /* পুরো লাইন জুড়ে থাকবে */
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.id-label {
    font-size: 0.65rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.id-value-main {
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.3;
}

.id-value-mono {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--neon-cyan);
    letter-spacing: 1px;
    font-weight: 700;
}

/* 4. Experience Bar */
.id-experience-bar {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
    padding: 8px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    border: 1px dashed rgba(255, 215, 0, 0.3);
}

/* 5. Twitter Style Verified Tick */
.verified-tick {
    color: #1d9bf0; /* Twitter Blue */
    width: 22px;
    height: 22px;
    display: inline-flex;
}
.verified-tick svg { width: 100%; height: 100%; }

/* Expert Level Badge inside Box */
.expert-level-tag {
    font-size: 0.8rem;
    color: #fff;
    background: rgba(255,255,255,0.1);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* ===================================================
   🚀 NEW FIXES: LAYOUT & ALIGNMENT (Added per request)
   =================================================== */

/* --- 🚀 FIXED: NAME & VERIFIED TICK ALIGNMENT --- */
.profile-name-hero {
    /* ফন্ট সাইজ একটু কমানো হলো যাতে এক লাইনে থাকে */
    font-size: 1.6rem !important;
    font-weight: 800;
    margin: 0;
    white-space: nowrap; /* টেক্সট ভাঙা বন্ধ করবে */
    overflow: hidden;
    text-overflow: ellipsis; /* খুব বড় নাম হলে ... দেখাবে */
    max-width: 220px; /* নামের জন্য নির্দিষ্ট জায়গা */
    display: inline-block;
    vertical-align: middle;
}

.verified-tick {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px; /* নামের সাথে একটু গ্যাপ */
    flex-shrink: 0; /* আইকন চ্যাপ্টা হবে না */
}

/* ফ্লেক্স কন্টেইনার আপডেট */
.profile-identity > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap; /* ভাঙবে না */
    width: 100%;
}

/* --- 🚀 FIXED: IDENTITY CARD LAYOUT --- */
.identity-card-box {
    width: 100%; /* পুরো বক্সটি চওড়া হবে */
    padding: 15px; /* প্যাডিং একটু কমানো হলো */
    box-sizing: border-box; /* বর্ডার যাতে উইডথ না বাড়ায় */
}

.id-info-grid {
    display: grid;
    /* এখন আইডি এবং লেভেল পাশাপাশি থাকবে, কিন্তু ডেজিগনেশন পুরোটা পাবে */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

/* ডেজিগনেশন যাতে এক লাইনে থাকে */
.id-value-main {
    font-size: 0.95rem; /* ফন্ট একটু ছোট */
    white-space: nowrap; /* ভাঙবে না */
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

/* Employee ID এবং Expert Level এর জন্য ফিক্স */
.id-info-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Expert Level Badge যাতে নিচে না নামে */
.expert-level-tag {
    font-size: 0.75rem;
    padding: 3px 8px;
    white-space: nowrap;
    text-align: center;
    width: fit-content;
    margin: 0 auto; /* মাঝখানে থাকবে */
}

/* --- 🚀 FIXED: EDIT PROFILE MODAL (CENTERED & SCROLLABLE) --- */
.modal-container.profile-edit-modal {
    width: 95%;
    max-width: 600px; /* বেশি চওড়া হবে না */
    max-height: 85vh; /* স্ক্রিনের ৮৫% এর বেশি হবে না */
    overflow-y: auto; /* ভেতরে স্ক্রল হবে */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    background: #0f1020; /* সলিড ব্যাকগ্রাউন্ড */
    border-radius: 16px;
    z-index: 10000; /* হেডারের উপরে থাকবে */
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* স্ক্রলবার ডিজাইন */
.modal-container.profile-edit-modal::-webkit-scrollbar {
    width: 6px;
}
.modal-container.profile-edit-modal::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 10px;
}

/* ইনপুট ফিল্ডগুলো যাতে সুন্দর দেখায় */
.profile-edit-modal .form-group input, 
.profile-edit-modal .form-group select, 
.profile-edit-modal .form-group textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.95rem;
}

/* Tools Checkbox Grid Fix */
#tools-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* সুন্দর গ্রিড */
    gap: 10px;
}

/* ==========================================================================
   🔥 FINAL WORLD-CLASS RESPONSIVE FIX (PASTE AT BOTTOM OF PROFILE.CSS)
   ========================================================================== */

/* 1. Main Page Wrapper Fix */
.profile-page-v3 {
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll on body */
    position: relative;
}

/* 2. Grid Container Layout (The Core Fix) */
.profile-grid-container {
    display: grid;
    /* Sidebar 340px, Main Content takes rest, avoiding overflow with minmax */
    grid-template-columns: 340px minmax(0, 1fr); 
    gap: 30px;
    width: 100%;
    max-width: 1440px; /* Control max width for large screens */
    margin: -100px auto 0 auto; /* Negative margin for Hero overlap, AUTO centers it */
    padding: 0 20px 50px 20px; /* Safe padding on sides */
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}

/* 3. Sidebar Adjustment */
.profile-sidebar {
    width: 100%;
    /* Sticky Sidebar Logic */
    position: sticky;
    top: 100px;
    height: fit-content;
    z-index: 10;
}

/* 4. Main Content Area */
.profile-main-content {
    width: 100%;
    min-width: 0; /* Critical for preventing grid blowout */
}

/* 5. Hero Banner Fix */
.profile-hero-banner {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   📱 RESPONSIVE BREAKPOINTS (ALL DEVICES)
   ========================================================================== */

/* Large Laptops (1200px - 1440px) */
@media (max-width: 1400px) {
    .profile-grid-container {
        max-width: 1200px;
        gap: 25px;
    }
}

/* Laptops & Landscape Tablets (992px - 1199px) */
@media (max-width: 1199px) {
    .profile-grid-container {
        grid-template-columns: 300px minmax(0, 1fr); /* Slightly smaller sidebar */
        gap: 20px;
    }
}

/* Tablets & Mobile Devices (Below 992px) - STACK LAYOUT */
@media (max-width: 991px) {
    .profile-grid-container {
        display: flex;
        flex-direction: column; /* Stack sidebar on top of content */
        margin-top: -60px; /* Reduce overlap on mobile */
        padding: 0 15px 40px 15px;
    }

    .profile-hero-banner {
        height: 280px; /* Smaller banner on mobile */
    }

    .profile-sidebar {
        position: relative;
        top: 0;
        width: 100%;
        margin-bottom: 20px;
    }

    /* Mobile Sidebar adjustments */
    .profile-sidebar .profile-glass-card {
        padding: 20px;
        margin-bottom: 15px;
    }

    /* Mobile Avatar adjustment */
    .profile-avatar-wrapper {
        margin-top: -50px;
    }
    
    .profile-avatar-wrapper img {
        width: 120px;
        height: 120px;
    }

    .profile-name-main {
        font-size: 1.8rem;
    }
}

/* Small Mobile (Below 576px) */
@media (max-width: 576px) {
    .profile-hero-banner {
        height: 220px;
    }
    
    .profile-grid-container {
        margin-top: -40px;
        padding: 0 10px 30px 10px;
    }
    
    .profile-name-main {
        font-size: 1.5rem;
    }

    /* Stats Grid on Mobile */
    .profile-stats-grid {
        flex-wrap: wrap;
        gap: 10px;
    }
    .stat-box {
        flex: 1 1 40%; /* 2 per row */
    }
    .divider-vertical {
        display: none;
    }
}

/* ==========================================================================
   ✨ WORLD CLASS SCROLLABLE TABS (FIXED)
   ========================================================================== */

.profile-tabs-container {
    width: 100%;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
}

.profile-tabs-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    padding-bottom: 5px;
    /* Hide scrollbar visually but keep functionality */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-cyan) rgba(255,255,255,0.05);
}

.profile-tabs-wrapper::-webkit-scrollbar {
    height: 4px;
}
.profile-tabs-wrapper::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}
.profile-tabs-wrapper::-webkit-scrollbar-thumb {
    background: var(--accent-cyan);
    border-radius: 10px;
}

.profile-tabs {
    display: inline-flex; /* Ensures buttons sit in one line */
    flex-wrap: nowrap;     /* No wrapping */
    align-items: center;
    gap: 10px;
    padding: 5px 2px;
    min-width: 100%;       /* Ensures it fills space if buttons are few */
}

/* Button Styling Update */
.profile-tab-btn {
    flex: 0 0 auto;        /* Prevent shrinking */
    white-space: nowrap;   /* Keep text on one line */
    font-size: 0.9rem;
    padding: 10px 20px;
}

/* Desktop: If plenty of space, center them */
@media (min-width: 992px) {
    .profile-tabs {
        justify-content: flex-start; /* Or center if you prefer */
    }
}

/* Mobile: Ensure scroll feels good */
@media (max-width: 768px) {
    .profile-tabs-wrapper {
        margin: 0 -10px; /* Negative margin to touch edges */
        padding: 0 10px 10px 10px; /* Compensate padding */
        width: calc(100% + 20px);
    }
    .profile-tab-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   🛠️ UTILITY FIXES
   ========================================================================== */
   
/* Fix image overflow in grid */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure no horizontal scroll caused by animations */
body {
    overflow-x: hidden;
}

/* Fix Container Centering override */
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ===================================================
   PROFILE STORIES SECTION (Design Hub Clone)
   =================================================== */

.profile-stories-section {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 5px 20px 5px;
    background: transparent; /* Seamless blend */
    
    /* Hide Scrollbar */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.profile-stories-section::-webkit-scrollbar {
    display: none;
}

/* Story Card Style */
.story-card {
    width: 110px;
    height: 180px;
    min-width: 110px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
    background: var(--dark-blue);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.story-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 242, 255, 0.2);
}

/* Background Media */
.story-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.story-card:hover .story-bg {
    transform: scale(1.1);
}

/* Overlay Gradient */
.overlay-gradient {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
}

/* Avatar Ring */
.story-avatar-ring {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 2px;
    z-index: 2;
    background: rgba(0,0,0,0.5);
}

.story-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Ring Colors */
.ring-active { border: 2px solid #00f2ff; } /* Active Story Blue */
.ring-highlight { border: 2px solid #ffd700; } /* Saved Story Gold */

.story-username {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Create Story Card (Optional if user is owner) */
.create-story-card {
    background: rgba(255,255,255,0.05);
    display: flex; flex-direction: column; align-items: center;
}
.plus-icon-circle {
    position: absolute; bottom: 35px;
    width: 30px; height: 30px;
    background: linear-gradient(135deg, #00f2ff, #bd00ff);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 2px solid #000; color: #fff; z-index: 5;
}

/* ===================================================
   STORY VIEWER MODAL (Copy from Design Hub)
   =================================================== */
.story-viewer-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000; z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.story-viewer-overlay.active { opacity: 1; visibility: visible; }

.story-viewer-content {
    position: relative; width: 100%; max-width: 450px; height: 100%; max-height: 90vh;
    display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #111;
}
.close-story-viewer {
    position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.1);
    border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; z-index: 10002;
}
.story-progress-bar-container {
    position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 5px; z-index: 10002;
}
.story-bar-bg { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; }
.story-bar-fill { height: 100%; background: #fff; width: 0%; }
.story-header-info { position: absolute; top: 25px; left: 15px; display: flex; align-items: center; gap: 10px; z-index: 10002; }
.story-header-info img { width: 35px; height: 35px; border-radius: 50%; border: 1px solid #fff; }
.story-media-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #000; }
.story-media-container img, .story-media-container video { width: 100%; height: 100%; object-fit: contain; }
.story-nav-left, .story-nav-right { position: absolute; top: 0; bottom: 0; width: 30%; z-index: 10001; cursor: pointer; }
.story-nav-left { left: 0; } .story-nav-right { right: 0; }

@media (max-width: 768px) {
    .story-card { width: 90px; height: 150px; min-width: 90px; }
    .story-viewer-content { max-width: 100%; max-height: 100%; border-radius: 0; }
}

/* Save Story Button Style */
.save-story-btn {
    position: absolute;
    bottom: 20px; /* নিচে মাঝখানে থাকবে */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 10005; /* সবার উপরে */
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.save-story-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.save-story-btn i {
    color: #ff4757; /* Heart Color */
}

/* 🔥 FORCE SWEETALERT ON TOP OF EVERYTHING 🔥 */
.swal2-container {
    z-index: 20000 !important; /* স্টোরি ভিউয়ারের (10000) চেয়ে অনেক বেশি */
}

/* --- 1. Highlight Edit/Delete Actions (Hover Effect) --- */
.highlight-item {
    /* আগের স্টাইল ঠিক রেখে ফ্লেক্স ডিরেকশন ঠিক করা */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
    position: relative;
    cursor: pointer;
    vertical-align: top;
    width: 70px; /* ফিক্সড উইডথ যাতে বাটন মাঝখানে থাকে */
}

/* ডিফল্টভাবে অ্যাকশন বাটন লুকানো থাকবে */
.highlight-actions-row {
    display: none; 
    gap: 5px;
    margin-top: 5px; /* নামের নিচে */
}

/* মাউস নিলে (Hover) বাটন দেখাবে */
.highlight-item:hover .highlight-actions-row {
    display: flex;
}

/* --- 2. Main Profile Active Story Ring (Instagram Style) --- */
.has-active-story {
    /* রংধনু বর্ডার বা গ্রেডিয়েন্ট রিং */
    padding: 3px; /* রিং এবং ছবির মাঝের গ্যাপ */
    border: 2px solid transparent !important; /* আগের বর্ডার রিমুভ */
    border-radius: 50%;
    background-image: linear-gradient(#0f1020, #0f1020), 
                      linear-gradient(45deg, #00f2ff, #bd00ff, #ff0055);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.4); /* গ্লো এফেক্ট */
    animation: ringPulse 2s infinite;
}

@keyframes ringPulse {
    0% { box-shadow: 0 0 15px rgba(0, 242, 255, 0.4); }
    50% { box-shadow: 0 0 25px rgba(189, 0, 255, 0.6); }
    100% { box-shadow: 0 0 15px rgba(0, 242, 255, 0.4); }
}

/* --- HIGHLIGHTS SCROLL FIXES (Drag & Wheel) --- */

#story-highlights {
    /* স্ক্রলবার লুকানো */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE */
    
    /* ড্র্যাগ করার সময় টেক্সট সিলেক্ট না হয় */
    user-select: none; 
    -webkit-user-select: none;
    
    /* মাউস কার্সার স্টাইল */
    cursor: grab; 
    cursor: -webkit-grab;
    
    /* মোবাইলে স্মুথ স্ক্রল */
    -webkit-overflow-scrolling: touch;
    
    /* ফ্লেক্স লেআউট ফিক্স */
    display: flex;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 10px; /* নিচে একটু স্পেস */
}

/* Chrome/Safari তে স্ক্রলবার লুকানো */
#story-highlights::-webkit-scrollbar {
    display: none;
}

/* যখন ড্র্যাগ করা হবে (Grabbed State) */
#story-highlights.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    transform: scale(1); /* জাস্ট ক্লাস অ্যাক্টিভ বোঝার জন্য */
}

/* --- FIXED: ALWAYS VISIBLE ARROWS --- */

.highlights-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0 35px; /* অ্যারোর জন্য জায়গা ছাড়া হলো */
}

/* Arrow Common Style */
.scroll-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35px; /* টাচ এরিয়া বড় করা হলো */
    display: flex; /* সবসময় ফ্লেক্স থাকবে */
    align-items: center;
    justify-content: center;
    z-index: 20;
    cursor: pointer;
    opacity: 1 !important; /* 🔥 সবসময় দৃশ্যমান */
    color: #fff;
    font-size: 1.2rem;
    pointer-events: auto;
    
    /* সুন্দর ব্যাকগ্রাউন্ড (Glassmorphism) */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Left Arrow */
.left-arrow {
    left: 0;
    background: rgba(15, 23, 42, 0.8); /* সলিড কিন্তু হালকা স্বচ্ছ */
    border-right: 1px solid rgba(255,255,255,0.1);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

/* Right Arrow */
.right-arrow {
    right: 0;
    background: rgba(15, 23, 42, 0.8);
    border-left: 1px solid rgba(255,255,255,0.1);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Hover Effect (Desktop Only) */
@media (hover: hover) {
    .scroll-arrow:hover {
        background: var(--accent-cyan);
        color: #000;
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.4);
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .highlights-wrapper {
        padding: 0 30px; /* মোবাইলে একটু কম প্যাডিং */
    }
    .scroll-arrow {
        width: 30px;
        background: rgba(15, 23, 42, 0.9); /* মোবাইলে একটু গাঢ় */
    }
}

/* --- MOBILE SPECIFIC FIXES --- */

@media (max-width: 768px) {
    /* ১. মোবাইলেও অ্যারো দেখাবে */
    .scroll-arrow {
        display: flex !important;
        opacity: 1 !important;
        width: 25px; /* মোবাইলে একটু ছোট */
        background: rgba(15, 23, 42, 0.95); /* সলিড ব্যাকগ্রাউন্ড */
    }

    /* ২. টাচ স্ক্রল এনাবল করা */
    #story-highlights {
        overflow-x: auto !important; /* স্ক্রল এনাবল */
        -webkit-overflow-scrolling: touch; /* আইফোনে স্মুথ */
        pointer-events: auto; /* টাচ কাজ করবে */
        padding-bottom: 10px;
        
        /* টাচ ড্র্যাগ ইজি করার জন্য */
        scroll-snap-type: x mandatory; 
    }
    
    .highlight-item {
        scroll-snap-align: start; /* আইটেম ধরে থামবে */
    }

    /* ৩. অ্যারো টাচ করলে যাতে জুম না হয় */
    .scroll-arrow {
        touch-action: manipulation;
    }
}

/* --- TOP STORY SECTION SCROLL FIXES --- */

.profile-stories-section {
    display: flex;
    gap: 12px;
    
    /* স্ক্রলিং এবং লেআউট */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 5px 20px 5px;
    width: 100%;
    
    /* স্ক্রলবার লুকানো */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE */
    
    /* ড্র্যাগ করার সময় টেক্সট সিলেক্ট না হয় */
    user-select: none; 
    -webkit-user-select: none;
    
    /* মাউস কার্সার স্টাইল */
    cursor: grab; 
    cursor: -webkit-grab;
    
    /* মোবাইলে স্মুথ টাচ স্ক্রল */
    -webkit-overflow-scrolling: touch;
    
    /* ফাস্ট স্ক্রলিং ফিক্স */
    scroll-behavior: auto; 
}

/* Chrome/Safari তে স্ক্রলবার লুকানো */
.profile-stories-section::-webkit-scrollbar {
    display: none;
}

/* যখন ড্র্যাগ করা হবে (Grabbed State) */
.profile-stories-section.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    transform: scale(1); 
}

/* =========================================================
   🚀 PRO IMAGE GALLERY & LIGHTBOX STYLES
   ========================================================= */

/* 1. Expand Icon on Post Images */
.post-media-single, .post-media-grid a {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Expand Button (Hidden by default, shown on hover) */
.expand-icon-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Hover Effect */
.post-media-single:hover .expand-icon-btn,
.post-media-grid a:hover .expand-icon-btn {
    opacity: 1;
    transform: scale(1);
}

.expand-icon-btn:hover {
    background: var(--accent-cyan);
    color: #000;
}

/* 2. Lightbox Modal (Full Screen) */
.lightbox-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 5, 10, 0.95); /* Deep Dark BG */
    backdrop-filter: blur(15px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Image Styling */
.lightbox-content img {
    max-width: 95vw;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
    user-select: none;
}

/* Navigation Buttons */
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
}
.lb-nav:hover { background: rgba(255, 255, 255, 0.3); }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }

/* Info Bar */
.lb-info-bar {
    position: absolute;
    bottom: 20px;
    display: flex;
    gap: 20px;
    color: #fff;
    font-size: 1rem;
    align-items: center;
    background: rgba(0,0,0,0.5);
    padding: 10px 20px;
    border-radius: 30px;
}

.lb-action {
    background: none; border: none; color: #fff; cursor: pointer; font-size: 1.2rem;
}
.lb-action:hover { color: var(--accent-cyan); }

/* Close Button */
.lightbox-close {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer;
    z-index: 20001;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    /* মোবাইলে সবসময় আইকন দেখাবে */
    .expand-icon-btn { opacity: 1 !important; transform: scale(1) !important; }
    
    .lb-nav { display: none; } /* মোবাইলে অ্যারো দরকার নেই, সোয়াইপ কাজ করবে */
    .lightbox-content img { max-width: 100vw; border-radius: 0; }
}