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

/*------- START Event View Details -------*/
.event-header { background: #111; position: relative; height: 38dvh; border: 1px solid #333; border-radius: 8px; overflow: hidden; }
.event-banner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; z-index: 1; opacity: 0.5; }
.event-banner { object-fit: cover; width: 100%; height: 100%; border-radius: 8px; }
.event-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: absolute;
    bottom: 0;
    width: 100dvw;
    padding: 15px;
    padding-bottom: 10px;
    border: 0px solid #543;
    border-radius: 8px;
    z-index: 2;
}
.event-title,
.event-host,
.event-attendance,
.event-datetime,
.event-location,
.event-address { margin: 2px 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

.event-title { font-size: 22px; margin: 0 0 10px 0; padding-right: 10px; }
.event-host { color: #fff; }
.event-attendance { font-size: 90%; margin: 0 0 10px 0; }
.event-datetime { color: #f90; }
.event-datetime-icon { font-size: 16px; }
.event-location { color: #09f; }
.event-location-icon { font-size: 20px; }
.event-address { color: #fff; }

.event-actions { margin: 10px auto; border: 0px solid #543; }
.event-host-button,
.event-post-button,
.event-edit-button,
.event-send-invite-button,
.event-invite-only-button,
.event-leave-button,
.event-join-button { font-size: 20px; font-weight: bolder; }

.event-host-button { background: #f90; border: 1px solid #d70; }
.event-post-button { background-color: #f90; width: 115px; font-size: 18px; }
.event-edit-button { background-color: #888; width: 50px; }
.event-send-invite-button { background-color: #888; width: 50px; }
.event-invite-only-button { background-color: #888; width: 100%; font-size: 18px; }
.event-leave-button { background-color: #f44; width: 115px; font-size: 18px; }
.event-join-button { background-color: #0b0; width: 115px; font-size: 18px; }

.event-description { background: #000; color: #888; margin: 0 0 10px 0; padding: 15px; border: 1px solid #543; border-radius: 8px; }



/*--- START Event Posts Feed ---*/
.event-posts-feed { background-color: #000; }
.event-post-card { margin-top: 10px; padding: 5px 10px; box-shadow: 0px 0px 5px #ff990066; border: 1px solid #543; border-radius: 8px; }
.event-post-header { color: #fff; padding: 0; padding-bottom: 5px; border-bottom: 1px solid #333; }
.event-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%;
}
.event-post-author { color: #fff; font-weight: bold; text-decoration: none; }
.event-post-datetime { text-align: right; color: #888; font-size: 75%; margin: 2px 0; padding: 0; }
.event-post-body { display: flex; color: #fff; padding: 5px 0; border-bottom: 1px solid #333; }
.event-post-media-preview { width: 100%; max-height: 25dvh; border: 1px solid #543; border-radius: 6px; }
.event-post-body-text {
    width: 100%;
    margin: 0px;
    margin-left: 5px;
    padding: 10px;
    border-left: 1px solid #543;
    border-right: 1px solid #543;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.event-post-actions { display: flex; text-align: left; color: #444; padding: 2px; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.event-post-like-button,
.event-post-comment-button { background: none; color: #fff; margin-right: 5px; padding: 0; border: none; cursor: pointer; transition: color 0.2s; }

.event-post-stat { color: #0b0; font-size: 14px; margin-right: 15px; padding: 0; }

.post-owner-actions { display: none; }
.event-post-settings-button,
.event-post-edit-button,
.event-post-delete-button {
    background: none;
    font-size: 18px;
    margin: 5px 0;
    margin-top: 15px;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}
.event-post-settings-button { color: white; }
.event-post-edit-button { color: #888; }
.event-post-delete-button { color: #f44; }
.event-post-like-button.liked .ion-heart { color: #ff0000 !important; }

.inline-edit-box { display: none; color: #fff; padding: 5px 0; border-bottom: 1px solid #333; }
.inline-edit-box textarea { background: #111; box-sizing: border-box; resize: vertical; width: 100%; color: #fff; padding: 8px; border: 1px solid #444; border-radius: 4px; }
.inline-edit-controls { display: flex; gap: 6px; justify-content: flex-end; margin: 10px auto; }
/*--- START Event Posts Feed ---*/



/*--- START Event Post Reply Bar ---*/
.event-post-replay-bar {  text-align: right; margin-top: 15px; border: 0px solid #333; }
.event-post-replay-button { background: #f90; font-size: 90%; font-weight: bolder; padding: 4px 12px; }
/*--- END Event Post Reply Bar ---*/



/*--- START Event Post Comments Feed ---*/
.event-post-comments-section { display: none; margin-top: 15px; border-top: 1px dashed #d70; }

/* Start Scrollable Fixed Height Comment List */
.event-post-comments-list-wrapper { max-height: 85dvh; margin-top: 5px; overflow-y: auto; }
.event-post-comments-list-wrapper::-webkit-scrollbar { width: 5px; }
.event-post-comments-list-wrapper::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
/* END Scrollable Fixed Height Comment List */

.event-post-comment-card { margin-top: 10px; padding-left: 10px; border: 1px solid #333; border-radius: 8px; }
.event-post-comment-header { padding: 5px 0; border-bottom: 1px solid #333; }
.event-post-comment-avatar {
    background: #333;
    display: flex;
    object-fit: cover;
    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%;
}
.event-post-comment-author { color: #fff; font-weight: bold; text-decoration: none; }
.event-post-comment-datetime { text-align: right; color: #888; font-size: 75%; margin: 2px 0; padding: 0; }
.event-post-comment-body { display: flex; color: #fff; padding: 5px 0; border-bottom: 1px solid #333; }
.event-post-comment-media-preview { width: 100%; max-height: 20dvh; border-radius: 6px; }
.event-post-comment-body-text {
    width: 100%;
    margin: 0px;
    margin-left: 5px;
    padding: 10px;
    border-left: 1px solid #543;
    border-right: 1px solid #543;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.event-post-comment-actions { text-align: left; color: #fff; font-size: 16px; padding: 2px; border-top: 1px solid #333; border-bottom: 1px solid #333; }

.event-post-comment-like-button { background: none; color: #fff; font-size: 18px; border: none; cursor: pointer; transition: color 0.2s; }

.post-comment-owner-actions { display: none; }
.event-post-comment-edit-button,
.event-post-comment-delete-button {
    background: #444;
    color: #aaa;
    font-size: 13px;
    margin: 5px 0;
    margin-top: 15px;
    border: 1px solid #633;
    cursor: pointer;
    transition: color 0.2s;
}
.event-post-comment-delete-button { color: #f44; }
.event-post-comment-like-button.liked .ion-heart { color: #ff0000 !important; font-size: 18px; }


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




.comment-form { display: flex; gap: 8px; margin-top: 10px; }
.comment-input { background: #111; flex: 1; 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; }


/*--- END Event Post Comments Feed ---*/



/*------- END Event View Details -------*/



/* Modals */
.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;
}
.modal-content {
    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;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.modal-header h3 { margin: 0; color: #fff; }

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

/* Form Styling */
.modal-content input[type="text"],
.modal-content input[type="datetime-local"],
.modal-content textarea,
.modal-content select { background: #111; box-sizing: border-box; width: 100%; color: #fff; margin-bottom: 10px; padding: 8px; border: 1px solid #444; border-radius: 4px; }
.modal-content label { color: #aaa; font-size: 80%; display: block; margin-bottom: 4px; }
.modal-actions { text-align: right;  margin-top: 15px; }

/* Custom File Selector */
input[type="file"] { font-family: sans-serif; color: #ccc; }
input[type="file"]::file-selector-button {
    background-color: #f90;
    font-weight: bold;
    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-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.stock-banner-option {
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    height: 50px;
    object-fit: cover;
    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; }