/* IDU Listings - submission form and my-listings. Recolour via --idu-listings-accent. */

.idu-sub, 
#create-group-form {
	--idu-listings-accent: var(--idu-listings-primary);
	--idu-listings-ink: var(--idu-listings-primary-ink);
	--idu-listings-muted: #6b7280;
	--idu-listings-line: #e5e7eb;
	--idu-listings-radius: 10px;
	margin: 0 auto;
	color: var(--idu-listings-ink);
	box-sizing: border-box;
}
@media (max-width: 480px) {
}

.idu-sub *,
.idu-sub *::before,
.idu-sub *::after {
	box-sizing: border-box;
}

/* Notices */
.idu-sub-notice,
.idu-sub-success,
.idu-sub-error {
	padding: 14px 18px;
	border-radius: var(--idu-listings-radius);
	margin-bottom: 18px;
	font-size: 0.95rem;
}

.idu-sub-notice {
	background: #f4f6f7;
	border: 1px solid var(--idu-listings-line);
}

.idu-sub-success {
	background: #e7f4ec;
	border: 1px solid #b7dcc5;
	color: #176b41;
}

.idu-sub-error {
	background: #fdecec;
	border: 1px solid #f3c2c2;
	color: #b42424;
}

.idu-sub-notice a,
.idu-sub-success a {
	color: var(--idu-listings-accent);
}

/* Form */
.idu-sub-form {
	background: transparent;
    margin-bottom: 0;
}

.idu-sub-heading {
	margin: 0 0 var(--idu-spacing);
    font-size: var(--idu-listings-h2);
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.72px;
}
@media (max-width: 600px) {
    .idu-sub-heading {
        font-weight: 500;
        line-height: 33px; /* 126.923% */
        letter-spacing: -0.26px;
    }
}

.idu-sub-types {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: var(--idu-spacing);
}

.idu-sub-type {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border: 1px solid var(--idu-listings-line);
	border-radius: var(--idu-listings-radius-pill);
	cursor: pointer;
	font-size: 15px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.15px;
    color: var(--idu-listings-ink);
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.idu-sub-type:hover {
    border-color: var(--idu-listings-accent);
	background-color: var(--idu-listings-gold-soft);
}

/* Real radio input, kept for accessibility (keyboard focus, screen readers)
   but visually replaced by the icon + button styling below. */
.idu-sub-type input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.idu-sub-type .idu-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--idu-listings-primary-ink);
}

.idu-sub-type:has(input:checked) {
	border-color: var(--idu-listings-accent);
	background-color: var(--idu-listings-gold-soft);
}

.idu-sub-type:has(input:checked) .idu-icon,
.idu-sub-type:has(input:checked) span {
	color: var(--idu-listings-primary-ink);
}

.idu-sub-type:has(input:focus-visible) {
	outline: 2px solid var(--idu-listings-accent);
	outline-offset: 2px;
}

@media (max-width: 480px) {
    .idu-sub-types {
        gap: 15px;
    }
    .idu-sub-type {
        padding: 12px 14px;
        font-size: 14px;
        letter-spacing: -0.14px;
    }
    .idu-sub-type .idu-icon {
        width: 17px;
        height: 17px;
    }
}

.idu-sub-row {
	margin-bottom: var(--idu-spacing);
}

.idu-sub-label {
	font-size: 15px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.15px;
    color: var(--idu-listings-ink);
}

.idu-req {
	color: var(--idu-listings-ink);
}

.idu-sub-form input[type="text"],
.idu-sub-form input[type="number"],
.idu-sub-form input[type="date"],
.idu-sub-form input[type="file"],
.idu-sub-form select,
.idu-sub-form textarea {
	width: 100%;
	padding: 12px 20px;
	border: 1px solid var(--idu-listings-line);
	border-radius: var(--idu-listings-radius-sm);
	background: var(--idu-listings-white);
    margin-top: 10px;
    font-size: 15px;
    line-height: normal;
    letter-spacing: -0.15px;
}

.idu-sub-form input[type="text"]:focus,
.idu-sub-form input[type="number"]:focus,
.idu-sub-form input[type="date"]:focus,
.idu-sub-form input[type="file"]:focus,
.idu-sub-form select:focus,
.idu-sub-form textarea:focus{
    outline: 0;
    background-color: var(--bb-content-background-color);
    box-shadow: var(--bb-input-focus-shadow);
    border-color: var(--bb-input-focus-border-color);
}

.idu-sub-form input[type="text"]::placeholder,
.idu-sub-form input[type="number"]::placeholder,
.idu-sub-form input[type="date"]::placeholder,
.idu-sub-form select::placeholder,
.idu-sub-form textarea::placeholder {
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.15px;
}

.idu-sub-form textarea {
	resize: vertical;
}

.idu-sub-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

.idu-sub-checks {
	display: grid;
	grid-template-columns: repeat( 3, max-content );
	justify-content: start;
	gap: 15px 80px;
    margin-top: 15px;
}
@media ( max-width: 680px ) {
	.idu-sub-checks {
		grid-template-columns: repeat( 2, max-content );
	}
}
@media ( max-width: 480px ) {
	.idu-sub-checks {
		grid-template-columns: 1fr;
	}
}

.idu-sub-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
    color: var(--idu-listings-ink);
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.15px;
	cursor: pointer;
}

.idu-sub-check input[type=checkbox] {
	accent-color: var(--idu-listings-accent);
    width: 18px;
    height: 18px;
}

.idu-sub-hint {
	margin: 6px 0 0;
	font-size: 0.82rem;
	color: var(--idu-listings-muted);
}

/* Drag and drop uploader */
.idu-dropzone {
	position: relative;
	border: 1px dashed var(--idu-listings-line);
	border-radius: var(--idu-listings-radius-sm);
	padding: 32px 20px;
	text-align: center;
	cursor: pointer;
	background: rgba(217, 219, 210, 0.15);
    box-shadow: var(--idu-listings-shadow-sm);
	transition: border-color 0.15s ease, background 0.15s ease;
    margin-top: 10px;
}

.idu-dropzone:hover,
.idu-dropzone.dragover {
	border-color: var(--idu-listings-accent);
    background: var(--idu-listings-white);
}

.idu-dropzone-input {
	display: none !important;
}

.idu-dropzone-prompt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--idu-listings-muted);
	pointer-events: none;
}

.idu-dropzone-ico .idu-ico {
	width: 40.581px;
    height: 47.744px;
	color: var(--idu-listings-accent);
}

.idu-dropzone-text {
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.18px;
	color: var(--idu-listings-ink);
}

.idu-dropzone-browse {
	color: var(--idu-listings-accent);
	font-weight: 500;
	text-decoration: underline;
}

.idu-sub-form input[type="file"] {
    width: auto;
    background: transparent;
    border: none;
    box-shadow: none;
}

.idu-dropzone small {
	color: rgba(57, 75, 65, 0.60);
    font-size: 1em;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.16px;
}

.idu-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.idu-preview {
	position: relative;
	width: 92px;
	height: 92px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--idu-listings-line);
}

.idu-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.idu-preview-x {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.idu-preview-x:hover {
	background: #d63638;
}

@media (max-width: 480px) {
    .idu-dropzone-ico .idu-ico {
        width: 50px;
        height: 50px;
    }
}

/* .idu-btn {
	display: inline-block;
	background: var(--idu-listings-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 12px 26px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.95rem;
}

.idu-btn:hover {
	filter: brightness( 0.93 );
	color: #fff;
} */

/* My listings */
.idu-sub-new {
	margin-bottom: 18px;
}

.idu-my-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.idu-my-table th,
.idu-my-table td {
	text-align: left;
	padding: 11px 10px;
	border-bottom: 1px solid var(--idu-listings-line);
	vertical-align: middle;
}

.idu-my-table th {
	color: var(--idu-listings-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.idu-my-table a {
	color: var(--idu-listings-accent);
	text-decoration: none;
}

.idu-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--idu-listings-radius-pill);
	font-size: 0.78rem;
	font-weight: 600;
}

.idu-status-publish {
	background: #e7f4ec;
	color: #176b41;
}

.idu-status-pending {
	background: #fdf3e3;
	color: #9a6700;
}

.idu-status-draft {
	background: #f0f0f1;
	color: #50575e;
}

.idu-my-actions a {
	margin-right: 10px;
}

.idu-my-del {
	color: #b42424 !important;
}

.idu-sub-empty {
	color: var(--idu-listings-muted);
}

/* Inside the BuddyBoss profile: drop our card chrome and adopt BuddyBoss's
 * own colour variables so the content matches the native member area. */
.buddypress .idu-sub {
	max-width: none;
	margin: 0;
}

.buddypress .idu-sub-form,
.buddypress .idu-my-listings {
	background: transparent;
	border: none;
	padding: 0;
}

.buddypress .idu-sub .idu-btn {
	background: var( --bb-primary-color, #1b7a4b );
	border-radius: var( --bb-button-radius, 4px );
	padding: 9px 20px;
}

.buddypress .idu-sub a:not( .idu-btn ):not( .idu-my-del ) {
	color: var( --bb-primary-color, #1b7a4b );
}

.buddypress .idu-my-table th,
.buddypress .idu-my-table td {
	border-bottom-color: var( --bb-content-border-color, #e5e7eb );
}

.buddypress .idu-my-table th {
	color: var( --bb-body-secondary-text-color, #6b7280 );
}

.buddypress .idu-status-publish {
	background: var( --bb-success-color-fonts, #176b41 );
	color: #fff;
}

/* Embedded WooCommerce account content inside the profile tabs */
.idu-wc-account .woocommerce-MyAccount-content {
	padding: 0;
	width: 100%;
}

.idu-wc-account form .button,
.idu-wc-account .woocommerce-Button,
.idu-wc-account button[type="submit"] {
	background: var( --bb-primary-color, #1b7a4b );
	color: #fff;
	border: none;
	border-radius: var( --bb-button-radius, 4px );
	padding: 10px 22px;
	cursor: pointer;
}

.idu-wc-account table.woocommerce-orders-table,
.idu-wc-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.idu-wc-account table.shop_table th,
.idu-wc-account table.shop_table td {
	padding: 11px 10px;
	border-bottom: 1px solid var( --bb-content-border-color, #e5e7eb );
	text-align: left;
}

.idu-wc-account .woocommerce-Address {
	margin-top: 10px;
}


/** Create/manage community form - matches the listing submission form (idu-submit.css) **/

/* Step heading */
#buddypress #group-create-body .bp-screen-title, 
.groups.group-create #buddypress.buddypress-wrap h2.bp-subhead {
	margin: 0 0 var(--idu-spacing);
	font-size: var(--idu-listings-h2);
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.72px;
}
.groups.group-create .buddypress-wrap .group-create-buttons li a, 
.groups.group-create .buddypress-wrap .group-create-buttons li span {
    font-size: 16px;
    font-weight: 400;
}
.groups.group-create .buddypress-wrap .group-create-buttons li.current a {
    font-weight: 500;
}
@media (max-width: 600px) {
	#group-create-body .bp-screen-title {
		line-height: 33px;
		letter-spacing: -0.26px;
	}
}

/* Labels */
#create-group-form label,
.idu-group-community-field label,
.idu-group-category-field label,
.idu-group-city-field label {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.15px;
	color: var(--idu-listings-ink);
    margin: 0 0 var(--idu-spacing-4);
}

/* Description hints */
#create-group-form .description,
.idu-group-community-field .description,
.idu-group-category-field .description,
.idu-group-city-field .description {
	margin: 6px 0 0;
	font-size: 0.82rem;
	color: var(--idu-listings-muted);
}

/* Inputs, textarea, select */
#buddypress #create-group-form input[type="text"],
#buddypress #create-group-form input[type="url"],
#buddypress #create-group-form textarea,
#buddypress #create-group-form select,
#buddypress .idu-group-community-field select,
#buddypress .idu-group-category-field select,
#buddypress #create-group-form #group-create-body select,
#buddypress .idu-group-city-field input[type="text"] {
	width: 100%;
	height: auto;
	padding: 12px 20px;
	border: 1px solid var(--idu-listings-line);
	border-radius: var(--idu-listings-radius-sm);
	background: var(--idu-listings-white);
	margin: 0 0 var(--idu-spacing);
	font-size: 15px;
	line-height: normal;
	letter-spacing: -0.15px;
	color: var(--idu-listings-ink);
}
#create-group-form textarea {
	resize: vertical;
}

#buddypress #create-group-form input[type="text"]:focus,
#buddypress #create-group-form input[type="url"]:focus,
#buddypress #create-group-form textarea:focus,
#buddypress #create-group-form select:focus,
#buddypress .idu-group-community-field select:focus,
#buddypress .idu-group-category-field select:focus,
#buddypress #create-group-form #group-create-body select:focus,
#buddypress .idu-group-city-field input[type="text"]:focus {
	outline: 0;
	background-color: var(--bb-content-background-color);
	box-shadow: var(--bb-input-focus-shadow);
	border-color: var(--bb-input-focus-border-color);
}

#buddypress #create-group-form input[type="text"]::placeholder,
#buddypress #create-group-form textarea::placeholder,
#buddypress .idu-group-city-field input[type="text"]::placeholder {
	font-size: 15px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.15px;
}

#buddypress #create-group-form .bs-styled-radio+label:before {
    border: 2px solid var(--idu-listings-line);
    width: 20px;
    height: 20px;
}
#buddypress #create-group-form .bs-styled-radio:checked+label:before {
    border: 4px solid var(--idu-listings-accent, var(--idu-listings-primary));
}

/* CTA buttons (Previous/Next/Create/Finish) */
#group-create-body input[type="submit"],
#group-create-body input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 25px;
	border: none;
	border-radius: var(--idu-listings-radius-pill);
	background: var(--idu-listings-gold);
	color: var(--idu-listings-primary-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease;
}
#group-create-body input[type="submit"]:hover,
#group-create-body input[type="button"]:hover {
	transform: translateY(-1px);
}
#group-create-body input#group-creation-previous {
	background: transparent;
	color: var(--idu-listings-ink);
	border: 1px solid var(--idu-listings-line-2);
}

#group-create-body .idu-cta-wrap {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}
#group-create-body .idu-cta-wrap input[type="submit"],
#group-create-body .idu-cta-wrap input[type="button"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 0;
}
#group-create-body .idu-cta-label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 25px;
	border-radius: var(--idu-listings-radius-pill);
	background: var(--idu-listings-gold);
	color: var(--idu-listings-primary-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease;
}
#group-create-body .idu-cta-wrap:hover .idu-cta-label {
	transform: translateY(-1px);
}
#group-create-body #group-creation-previous + .idu-cta-label {
	background: transparent;
	color: var(--idu-listings-ink);
	border: 1px solid var(--idu-listings-line-2);
}
#group-create-body #group-creation-previous + .idu-cta-label::after {
	content: none;
}

/* Group avatar upload */
#group-create-body #drag-drop-area {
	border: 1px dashed var(--idu-listings-line);
	border-radius: var(--idu-listings-radius-sm);
	background: rgba(217, 219, 210, 0.15);
	box-shadow: var(--idu-listings-shadow-sm);
	transition: border-color 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
#group-create-body #drag-drop-area:hover,
#group-create-body #drag-drop-area.dragover,
#group-create-body .drag-drop.drag-over #drag-drop-area {
	border-color: var(--idu-listings-accent);
	background: var(--idu-listings-white);
}
#group-create-body .drag-drop-inside {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
#group-create-body .drag-drop-inside::before {
	content: '\ee95';
	font-family: 'bb-icons';
	font-size: 32px;
	color: var(--idu-listings-accent);
}
#group-create-body .drag-drop-inside p {
	display: block;
	margin: 0;
}
#group-create-body .drag-drop-info {
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.18px;
	color: var(--idu-listings-ink);
}
#group-create-body .drag-drop-buttons input#bp-browse-button {
	background: none;
	border: none;
	padding: 0;
	color: var(--idu-listings-accent);
	font-weight: 500;
	font-size: 1em;
	text-decoration: underline;
	cursor: pointer;
}
#group-create-body .drag-drop-buttons input#bp-browse-button:focus {
    box-shadow: none;
}

#buddypress #group-create-body #bp-delete-avatar, 
#buddypress #bp-delete-cover-image {
    display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 25px;
	border-radius: var(--idu-listings-radius-pill);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease;
}

/* Invitees */
#buddypress #group-create-body .bb-groups-invites-right-top div.bp-feedback {
    background: transparent;
}
#buddypress #group-create-body .bs-styled-checkbox:checked+label:before {
    background: var(--idu-listings-accent);
    border-color: var(--idu-listings-accent);
}
#buddypress #group-create-body .bs-styled-checkbox+label:before {
    width: 18px;
    height: 18px;
}
#buddypress #group-create-body input#bp_invites_reset {
    background-color: transparent;
}
#buddypress #group-create-body input#bp_invites_reset:hover {
    background-color: var(--idu-listings-accent);
}
#buddypress #create-group-form textarea#send-invites-control {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 600px) {
    .groups.group-create #buddypress.buddypress-wrap #create-group-form .submit {
        gap: var(--idu-spacing-2);
        justify-content: flex-start;
    }
}