.profile-container {
    max-width: 600px;
    margin: auto;
    background: #fff;
}

/* Header */
.profile-header {
    display: flex;
    padding: 15px;
}

.profile-pic {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

.profile-right {
    margin-left: 20px;
}

.username {
    color: gray;
}

/* Stats */
.stats {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

/* Tabs */
.tabs {
    display: flex;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

    .tabs button {
        flex: 1;
        padding: 10px;
        border: none;
        background: none;
    }

.active-tab {
    border-bottom: 2px solid black;
}

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

.grid-item {
    position: relative;
    aspect-ratio: 1 / 1;
}

    .grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
    opacity: 0;
}

.grid-item:hover .overlay {
    opacity: 1;
}

.heart-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 80px;
    animation: pop 0.6s ease;
}

.profile-upload {
    position: relative;
    width: 120px;
    height: 120px;
}

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


/* 🔥 THIS IS THE KEY FIX */
.file-input-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* invisible */
    cursor: pointer;
}

.file-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* invisible */
    cursor: pointer;
}

/*crop image css*/

/* 🔥 MODAL BACKDROP */
.profile-cropper-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 🔥 MAIN CONTAINER */
.profile-crop-container {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    position: relative;
    z-index: 10000;
}

    /* 🔥 IMAGE WRAPPER */
    .profile-crop-container img {
        max-width: 100%;
        max-height: 300px;
        display: block;
        margin: 0 auto;
        opacity: 1 !important;
        filter: none !important;
    }

/* 🔥 FIX CROPPER IMAGE BLUR */
.cropper-container img {
    opacity: 1 !important;
    filter: none !important;
}

/* 🔥 CROPPER LAYER FIX */
.cropper-container {
    z-index: 10001 !important;
    pointer-events: auto !important;
}

/* 🔥 CROP BOX VISIBILITY */
.cropper-view-box {
    outline: 2px solid #fff !important;
}
/* 🔥 Darken outside area */
.cropper-face {
    opacity: 0.2 !important;
}
/* 🔥 Make grid lines visible */
.cropper-dashed {
    border-color: #ffffff !important;
    opacity: 0.7 !important;
}
/* 🔥 Resize handles (corners) */
.cropper-point {
    width: 12px !important;
    height: 12px !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
}
.post-grid img {
    display: block;
}
.tab-content {
    width: 100%;
}
.cropper-line {
    opacity: 1 !important;
    background-color: #fff !important;
}

/* 🔥 BUTTON AREA */
.profile-crop-actions {
    margin-top: 15px;
}

    /* 🔥 BUTTON FIX */
    .profile-crop-actions button {
        pointer-events: auto;
        position: relative;
        z-index: 10002;
    }

/* 🔥 PREVIEW IMAGE */
.profile-preview {
    margin-top: 10px;
}

    .profile-preview img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ddd;
    }

/* 🔥 PREVENT ANY GLOBAL OVERLAY ISSUE */
.profile-cropper-modal * {
    pointer-events: auto;
}