/* -----------------------------------------------------------------------------
   Group Upload Documents modal — align with Bond “Create a post” modal (Figma).
   Selectors use #bp-media-uploader.bp-media-document-uploader only (no .bond-group-documents)
   so styles apply even if the modal is moved in the DOM. BuddyBoss .modal-container uses
   padding + .bb-model-header negative margins; we reset padding to 0 and pad inner steps.
   ----------------------------------------------------------------------------- */

/* Card shell: remove side padding so header/footer can span full width like create-post */
#bp-media-uploader.bp-media-document-uploader .modal-container.has-folderlocationUI {
	margin: 0 auto;
	padding: 0;
	overflow: auto;
	background: #fff;
	border-radius: 4px;
}

/* Header: greige bar */
#bp-media-uploader.bp-media-document-uploader .bb-model-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 !important;
	padding: 15px 25px 16px;
	border-bottom: 1px solid #d8d8d8;
	border-radius: 0;
	background: #f4f4f2;
	box-shadow: none;
}

#bp-media-uploader.bp-media-document-uploader .bb-model-header #bp-media-uploader-modal-title {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #37322d;
	font: 400 20px/26px "DINNextRoundedLTProRegular", arial, sans-serif;
	text-decoration: none !important;
}

#bp-media-uploader.bp-media-document-uploader .bb-model-header #bp-media-uploader-modal-title:hover,
#bp-media-uploader.bp-media-document-uploader .bb-model-header #bp-media-uploader-modal-title:focus {
	color: #37322d;
	text-decoration: none !important;
}

/* Close — match composer (24px); override BuddyBoss default rgba */
#bp-media-uploader.bp-media-document-uploader .bb-model-header .bb-model-close-button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0 0 0 auto !important;
	padding: 0;
	border: 0;
	background: transparent;
	color: #37322d !important;
	text-decoration: none;
	line-height: 1;
	opacity: 1 !important;
}

#bp-media-uploader.bp-media-document-uploader .bb-model-header .bb-model-close-button .bb-icon-l.bb-icon-times {
	font-size: 24px;
	line-height: 1;
	color: inherit;
}

/* Step 1 body */
#bp-media-uploader.bp-media-document-uploader .bb-field-steps-1 > .bb-field-wrap {
	margin: 0;
	padding: 20px 25px 24px;
}

#bp-media-uploader.bp-media-document-uploader .bb-field-steps-1 .bb-field-wrap > .bb-dropzone-wrap {
	margin-bottom: 0;
}

/*
 * Step 2 (folder picker): same horizontal inset as step 1 so group name / type (h4 + breadcrumbs)
 * are not flush to the modal edge. BuddyBoss only pads step 1 in our overrides above.
 */
#bp-media-uploader.bp-media-document-uploader .bb-field-steps-2 > .bb-field-wrap {
	margin: 0;
	padding: 20px 25px 24px;
}

#bp-media-uploader.bp-media-document-uploader .media-uploader-post-content {
	margin: 0 0 12px;
}

#bp-media-uploader.bp-media-document-uploader #bp-media-post-content {
	box-sizing: border-box;
	width: 100%;
	min-height: 80px;
	margin: 0;
	padding: 11px 16px;
	border: 1px solid #d2d0c8;
	border-radius: 4px;
	background: #fff !important;
	box-shadow: none;
	color: #37322d;
	font: 400 17px/25.5px "DINNextRoundedLTProRegular", arial, sans-serif;
	resize: vertical;
}

#bp-media-uploader.bp-media-document-uploader #bp-media-post-content::placeholder {
	color: #797667;
	opacity: 1;
}

#bp-media-uploader.bp-media-document-uploader #bp-media-post-content:focus-visible {
	outline: 2px solid #d50032;
	outline-offset: 2px;
}

/* Greige “add files” panel; inner dropzone stays visually one greige block */
#bp-media-uploader.bp-media-document-uploader .media-uploader-wrapper {
	box-sizing: border-box;
	margin: 0;
	padding: 12px;
	border: 1px solid #d2d0c8;
	border-radius: 4px;
	background: #f4f4f2;
}

#bp-media-uploader.bp-media-document-uploader .media-uploader-wrapper .dropzone.document-dropzone {
	margin: 0;
	min-height: 120px;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

#bp-media-uploader.bp-media-document-uploader .media-uploader-wrapper .dropzone .dz-default.dz-message {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/*
 * BuddyBoss (body.groups … .controls-added #bp-dropzone-content) sets margin-bottom: -55px
 * so the “Select Folder” row sits under the footer — Done then overlaps that link. Remove the
 * negative margin and keep Select Folder in normal flow above the footer.
 */
body.groups #bp-media-uploader.bp-media-document-uploader .modal-container .bb-field-steps-1.controls-added #bp-dropzone-content,
#bp-media-uploader.bp-media-document-uploader .modal-container .bb-field-steps-1.controls-added #bp-dropzone-content {
	margin-bottom: 0 !important;
	padding-bottom: 4px;
}

#bp-media-uploader.bp-media-document-uploader #bp-media-document-next.bb-field-uploader-next {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin-top: 16px !important;
	margin-bottom: 12px;
	clear: both;
}

/* Footer — “Create new folder” on the left (like step 1 “Select Folder”); Back + Done stay right */
#bp-media-uploader.bp-media-document-uploader .document-uploader-footer.bb-model-footer {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 16px 25px;
	border-top: 1px solid #d8d8d8;
	background: #f4f4f2;
	clear: both;
}

/*
 * “Create new folder” belongs on the folder step only. BuddyBoss footer CSS uses
 * #buddypress … display: block, which can win over the template’s inline display:none
 * depending on cascade — so we re-hide while step 1 is the active pane. On the folder
 * step, .bb-field-steps-1 gets an inline display:none from jQuery slideUp; this rule
 * then does not apply and BuddyBoss .show() on the link works as before.
 */
#bp-media-uploader.bp-media-document-uploader .modal-container.has-folderlocationUI:has(
	.bb-field-steps-1:not([style*="display: none"])
) .document-uploader-footer .bp-document-open-create-popup-folder {
	display: none !important;
}

#bp-media-uploader.bp-media-document-uploader .document-uploader-footer .bp-document-open-create-popup-folder {
	margin: 0 !important;
	clear: none !important;
}

/*
 * Done: match Create Post primary button — grey until a folder is chosen, then Bond red.
 * BuddyBoss uses .location-folder-list li.is_active; hidden .bb-folder-selected-id is also
 * set from PHP when opening inside a folder (:not([value="0"])).
 */
#bp-media-uploader.bp-media-document-uploader .document-uploader-footer #bp-media-document-submit.button {
	float: none !important;
	order: 2;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 34px;
	margin: 0 !important;
	padding: 8px 22px 6px;
	border: 1px solid #d2d0c8;
	border-radius: 4px;
	background: #d2d0c8;
	color: #797667;
	font: 400 15px/16.5px "DINNextRoundedLTProRegular", arial, sans-serif;
	box-shadow: none;
	line-height: 1.2;
	text-decoration: none;
	opacity: 1;
	cursor: default;
}

/*
 * Step 1 upload state:
 * - Keep Done visible even before upload
 * - Right-align footer actions for consistency
 * - Enable/red Done only after at least one successful file upload tile exists
 */
#bp-media-uploader.bp-media-document-uploader .modal-container.has-folderlocationUI:has(
	.bb-field-steps-1:not([style*="display: none"])
) .document-uploader-footer.bb-model-footer {
	justify-content: flex-end;
}

#bp-media-uploader.bp-media-document-uploader .modal-container.has-folderlocationUI:has(
	.bb-field-steps-1:not([style*="display: none"])
) .document-uploader-footer #bp-media-document-submit.button {
	border-color: #d2d0c8;
	background: #d2d0c8;
	color: #797667;
	cursor: default;
}

#bp-media-uploader.bp-media-document-uploader .modal-container.has-folderlocationUI.modal-container--alert:has(
	.bb-field-steps-1:not([style*="display: none"])
) .document-uploader-footer #bp-media-document-submit.button {
	border-color: var(--color-bond-red-darker);
	background: var(--color-bond-red-darker);
	color: #fff;
	cursor: pointer;
}

#bp-media-uploader.bp-media-document-uploader .modal-container.has-folderlocationUI.modal-container--alert:has(
	.bb-field-steps-1:not([style*="display: none"])
) .document-uploader-footer #bp-media-document-submit.button:hover,
#bp-media-uploader.bp-media-document-uploader .modal-container.has-folderlocationUI.modal-container--alert:has(
	.bb-field-steps-1:not([style*="display: none"])
) .document-uploader-footer #bp-media-document-submit.button:focus-visible {
	border-color: var(--color-bond-red-darkest);
	background: var(--color-bond-red-darkest);
	color: #fff;
}

#bp-media-uploader.bp-media-document-uploader:is(
	:has(.location-folder-list li.is_active),
	:has(.bb-field-steps-2 .bb-folder-selected-id:not([value="0"]))
) .document-uploader-footer #bp-media-document-submit.button {
	border-color: var(--color-bond-red-darker);
	background: var(--color-bond-red-darker);
	color: #fff;
	cursor: pointer;
}

#bp-media-uploader.bp-media-document-uploader:is(
	:has(.location-folder-list li.is_active),
	:has(.bb-field-steps-2 .bb-folder-selected-id:not([value="0"]))
) .document-uploader-footer #bp-media-document-submit.button:hover,
#bp-media-uploader.bp-media-document-uploader:is(
	:has(.location-folder-list li.is_active),
	:has(.bb-field-steps-2 .bb-folder-selected-id:not([value="0"]))
) .document-uploader-footer #bp-media-document-submit.button:focus-visible {
	border-color: var(--color-bond-red-darkest);
	background: var(--color-bond-red-darkest);
	color: #fff;
}

#bp-media-uploader.bp-media-document-uploader .document-uploader-footer #bp-media-document-prev {
	float: none !important;
	order: 1;
	/* Consumes space before Back so Back + Done sit on the right; create-folder stays left */
	margin: 0 !important;
	margin-inline-start: auto !important;
	color: #545246;
}