/* GLOBAL CONTAINER */
.container { max-width: 90dvw; margin: 0 auto; padding: 5px; border: 0px solid #fff;  }


/* GROUP ACTION BUTTONS */
.group-owner-button,
.group-invite-only-button,
.group-leave-button,
.group-join-button,
.group-post-button { font-size: 16px; font-weight: bolder; margin: 5px 0; padding: 4px 12px; }

.group-owner-button { background-color: #f90; border: 1px solid #d70; }
.group-invite-only-button { background-color: #888; border: 1px solid #aaa; }
.group-leave-button { background-color: #f44; border: 1px solid #a00; }
.group-join-button { background-color: #0b0; border: 1px solid #080; }
.group-post-button { background-color: #f90; border: 1px solid #d70; }


/* EXPLORE GROUPS */
.explore-group-header { background: #111; position: relative; padding: 15px; border: 1px solid #543; border-radius: 8px; }
.explore-group-title { font-size: 24px; padding: 5px 0; }
.explore-group-description { margin: 5px 0; }
.explore-group-create-button { background: #f90; color: #000; font-size: 16px; font-weight: bolder; margin: 5px 0; }
.explore-group-search-bar { background: #111; box-sizing: border-box; width: 100%; color: #fff; margin: 6px 0; border-radius: 8px; }

/* Group List Cards */
.explore-group-card {
    position: relative;
    background: #111;
    margin-bottom: 15px;
    border: 1px solid #543;
    border-radius: 8px;
}
.explore-group-card-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; z-index: 1; }
.explore-group-banner { object-fit: cover; width: 100%; height: 100%; border-radius: 8px; }
.explore-group-card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.2) 100%);
    position: relative;
    font-size: 16px;
    padding: 15px;
    border-radius: 8px;
    z-index: 2;
}
.group-view-link { color: #fff; font-size: 18px; font-weight: bold; text-decoration: none; }

.group-member-count,
.group-privacy,
.group-details { margin: 3px 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

.group-member-count { color: #ccc; font-size: 12px; margin-top: 5px; }
.group-privacy { color: #ccc; font-size: 12px; margin-top: 5px; }
.group-details { color: #ccc; font-size: 12px; margin-top: 5px; }



/* GROUP VIEW */
/* Group Details */
.group-header { background: #111; position: relative; min-height: 85px; border: 1px solid #543; border-radius: 8px; overflow: hidden; }
.group-banner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; z-index: 1; opacity: 0.5; }
.group-banner { object-fit: cover; width: 100%; height: 100%; border-radius: 8px; }
.group-header-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.1) 100%);
    position: relative;
    bottom: 0;
    width: 100%;
    line-height: 1.2;
    margin: auto;
    padding: 15px;
    padding-bottom: 10px;
    border: 1px solid #543;
    border-radius: 8px;
    z-index: 2;
}

.group-name,
.group-member-count,
.group-privacy,
.group-rules { font-size: 16px; margin: 4px 0; padding-right: 10px; }

.group-name { font-size: 22px; }
.group-member-count { color: #f90; }
.group-privacy { color: #888; }
.group-rules { color: #f90; }

.group-description { background: #111; color: #fff; margin: 3px 0; padding: 10px 15px; border: 1px solid #543; border-radius: 8px; }




/* Group Posts Feed */
.group-posts-feed { background: #111; color: #fff; margin: 3px 0; padding: 0 10px; border: 1px solid #543; border-radius: 8px; }

.group-post-card { margin: 10px 0; padding: 10px; box-shadow: 0px 0px 5px #ff990066; border: 1px solid #543; border-radius: 8px; }
.group-post-card-header { background: #11111133; margin-bottom: 10px; padding: 2px; border: 1px solid #543; border-radius: 8px; }

.group-post-avatar {
    background: #333;
    display: flex;
    object-fit: cover;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 35px;
    width: 45px;
    height: 45px;
    margin: auto;
    margin-left: 0;
    margin-right: 5px;
    padding: 1px;
    border: 1px solid #f90;
    border-radius: 50%;
}

.group-post-author { color: #f90; }
.group-post-datetime { text-align: right; color: #888; font-size: 75%; }

.group-post-body { color: #fff; padding: 5px 0; border-bottom: 1px solid #333; }
.group-post-body-content { white-space: pre-wrap; margin: 5px 0 10px 0; }
.group-post-body-image { margin: 5px 0 10px 0; border-right: 1px solid #888; }
.group-post-media-preview { max-width: 100%; max-height: 25dvh; margin-top: 10px; border-radius: 6px; }

.inline-edit-box { display: none; margin: 5px 0 2px 0; padding: 6px 0 10px 0; border-bottom: 1px solid #666; }
.inline-edit-box textarea { background: #111; box-sizing: border-box; resize: vertical; width: 100%; color: #fff; padding: 8px; border-radius: 4px; border: 1px solid #444; }
.inline-edit-controls { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }

.group-post-actions { color: #888; font-size: 22px; padding: 2px; border-top: 1px solid #333; border-bottom: 1px solid #333; }

.action-btn,
.group-post-comment-button { background: none; color: #888; font-size: 18px; border: none; cursor: pointer; transition: color 0.2s; }
.action-btn.liked .ion-heart { color: #ff0000 !important; font-size: 18px; }

.group-owner-actions-bar { text-align: right; }


.group-post-edit-button,
.group-post-delete-button {
    background: none;
    width: 32px;
    color: #888;
    font-size: 12px;
    margin-left: 6px;
    padding: 3px 0;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}
.group-post-delete-button { color: #f44; }
/* Hover effects for post action buttons */
/* .action-btn:hover { color: #0b0; }
.group-post-comment-button:hover { color: #f90; }
.group-post-edit-button:hover { color: #0b0; }
.group-post-delete-button:hover { color: #f44; } */




/* Group Post Comments */
.group-post-comments-section { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #d70; }

/* Scrollable Fixed Height Comment List */
.group-post-comments-list-wrapper { max-height: 515px; margin-bottom: 10px; padding-right: 5px; overflow-y: auto; }
.group-post-comments-list-wrapper::-webkit-scrollbar { width: 5px; }
.group-post-comments-list-wrapper::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

.group-post-comment-card { background: #111; font-size: 14px; margin-bottom: 10px; padding: 5px; border: 1px solid #333; border-radius: 8px; }
.group-post-comment-header { background: #11111133; display: flex; margin-bottom: 10px; padding: 2px 5px; border: 1px solid #543; border-radius: 8px; }
.group-post-comment-avatar {
    background: #333;
    display: flex;
    object-fit: cover;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 28px;
    width: 35px;
    height: 35px;
    margin: auto;
    margin-left: 0;
    margin-right: 5px;
    padding: 1px;
    border: 1px solid #f90;
    border-radius: 50%;
}
.group-post-comment-author { color: #f90; margin: 5px 2px; }
.group-post-comment-datetime { text-align: right; color: #888; font-size: 11px; margin: 2px 0; }

.group-post-comment-content { display: flex; white-space: pre-wrap; padding: 5px 0; }
.group-post-comment-media-preview { max-width: 10dvw; margin: 10px 0; border-radius: 6px; overflow: hidden; }
.group-post-comment-text { color: #ddd; margin: 0 5px; padding: 5px; padding-left: 10px; border-left: 1px solid #333; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

.group-post-comment-actions { color: #888; padding: 2px; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.comment-like-btn,
.group-post-comment-edit-button,
.group-post-comment-delete-button {
    background: none;
    width: 32px;
    color: #888;
    font-size: 12px;
    margin-left: 6px;
    padding: 3px 0;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}
.comment-like-btn { font-size: 18px; }
.comment-like-btn.liked .ion-heart { color: #f00 !important; font-size: 18px; }
.group-post-comment-delete-button { color: #f44; }

.comment-form { display: flex; gap: 8px; margin-top: 10px; }
.comment-input { background: #111; flex: 1; font-family: Georgia, sans-serif; color: #fff; font-size: 85%; padding: 6px 10px; border: 1px solid #333; border-radius: 4px; }
.comment-submit { background: #f90; color: #111; font-size: 85%; font-weight: bold; padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; }

.member-card { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid #333; }
.member-card:last-child { border-bottom: none; }





/* Modals */
.group-create-modal-overlay {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10000;
}
.group-create-modal {
    background: #1f1f1f;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 550px;
    max-height: 85vh;
    padding: 20px;
    border: 1px solid #444;
    border-radius: 8px;
    overflow-y: auto;
}
.group-create-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.group-create-modal-header h3 { margin: 0; color: #fff; }

.close-btn { background: none; border: none; color: #888; font-size: 20px; cursor: pointer; }

.info-text { line-height: 1.3; color: #aaa; font-size: 12px; font-weight: lighter; margin-bottom: 5px; }

/* Form Styling */
.group-create-modal input[type="text"],
.group-create-modal textarea,
.group-create-modal select { background: #111; box-sizing: border-box; width: 100%; color: #fff; margin: 5px 0; padding: 8px; border: 1px solid #444; border-radius: 6px; }
.group-create-modal label { color: #aaa; font-size: 80%; display: block; margin-bottom: 4px; }

/* Custom File Selector */
input[type="file"] { font-family: Georgia, sans-serif; color: #aaa; }
input[type="file"]::file-selector-button {
    background-color: #f90;
    font-family: Georgia, sans-serif;
    font-weight: bolder;
    color: #000;
    margin-right: 10px;
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}
input[type="file"]::file-selector-button:hover { background-color: #d70; }

/* Stock Banner Choices */
.stock-banner-selection { margin: 10px 0; }
.stock-banner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.stock-banner-option {
    object-fit: cover;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
    opacity: 0.6;
}
.stock-banner-option.selected { border-color: #f90; opacity: 1; }
.stock-banner-option:hover { opacity: 1; }


/* Upload Group Banner */
.upload-group-banner-selection { margin: 15px 0; }

.group-create-modal-actions { text-align: right;  margin-top: 20px; }