/* =========================================================
   Blackboard Modern - Naked Theme Utilities (Bootstrap-first)
   Keep this file minimal. No design system here.

   Anything in this file should be either (a) something Bootstrap 5
   genuinely doesn't ship as a utility, or (b) so deeply project-
   specific that it doesn't belong in Bootstrap. Every rule must be
   commented with a reason. If a Bootstrap utility covers the same
   need, USE THE BOOTSTRAP UTILITY instead of adding here.
   ========================================================= */

/* ---------------------------------------------------------
   Fixed-height scrollable message thread pane.
   Bootstrap 5.3 has overflow-auto but no max-height utility
   for fixed pixel values.
--------------------------------------------------------- */
.bb-thread-pane { max-height: 460px; }

/* ---------------------------------------------------------
   Chat bubble max-width.
   Bootstrap's w-75 sets width:75% (forces every bubble to be
   exactly 75% wide); we want short bubbles to stay short and
   long ones to cap at 75% -- different rule, no utility.
--------------------------------------------------------- */
.bb-bubble-mw { max-width: 75%; }

/* ---------------------------------------------------------
   Fixed-size thumbnails in single-vehicle.php (carousel
   thumb-strip and "More from this seller" mini-rows).
   Bootstrap has w-* / h-* in percentages only.
--------------------------------------------------------- */
.bb-vehicle-thumb-strip { height: 64px; }
.bb-vehicle-mini-thumb  { width: 84px; height: 64px; }

/* ---------------------------------------------------------
   Avatar preview thumb on the settings page.
   Bootstrap has rounded-circle but no fixed-size utility,
   and object-fit-cover needs a constrained box to do its
   job. 72x72 matches the rest of the settings card layout.
--------------------------------------------------------- */
.bb-avatar-preview {
	width: 72px;
	height: 72px;
	min-width: 72px;
	max-width: 72px;
	min-height: 72px;
	max-height: 72px;
	flex: 0 0 72px;
}
/* Center + scale the fallback Font Awesome icon inside the preview circle. */
.bb-avatar-preview > i { line-height: 1; font-size: 32px; }

/* ---------------------------------------------------------
   Standardized display avatar (blackboard_user_avatar).
   Two content sizes — lg for profile headers, sm for lists
   & cards — plus the navbar exception. Always a circle;
   flex-basis stops it shrinking inside flex rows. The span
   variant is the placeholder, so it sizes its icon too.
--------------------------------------------------------- */
.bb-avatar-xl  { width: 125px; height: 125px; flex: 0 0 125px; object-fit: cover; }
.bb-avatar-lg  { width: 96px;  height: 96px;  flex: 0 0 96px;  object-fit: cover; }
.bb-avatar-sm  { width: 48px;  height: 48px;  flex: 0 0 48px;  object-fit: cover; }
.bb-avatar-nav { width: 28px;  height: 28px;  flex: 0 0 28px;  object-fit: cover; }
span.bb-avatar-xl  { font-size: 57px; }
span.bb-avatar-lg  { font-size: 44px; }
span.bb-avatar-sm  { font-size: 22px; }
span.bb-avatar-nav { font-size: 15px; }

/* Horizontal (image-left) listing card: keep the image column from collapsing
   when the body content is short. */
.bb-card-h-img { min-height: 160px; }

/* Full-image gallery modal: each photo is loaded on demand (current slide +
   neighbors) and fades in once it finishes, so the first pass through doesn't
   flicker. Bootstrap has no opacity-transition utility, hence this rule. */
.bb-modal-img { opacity: 0; transition: opacity .35s ease; }
.bb-modal-img.is-loaded { opacity: 1; }

/* ---------------------------------------------------------
   Print: strip site chrome so a listing prints as a clean
   spec sheet. Elements that shouldn't print are tagged with
   Bootstrap's own .d-print-none in the templates; here we
   only handle the global header/footer and a little cleanup
   Bootstrap's print utilities don't cover.
--------------------------------------------------------- */
@media print {
	.site-header,
	.site-footer {
		display: none !important;
	}
	.card {
		box-shadow: none !important;
		border: 1px solid #ddd !important;
	}
	body {
		background: #fff !important;
	}
}

/* ---------------------------------------------------------
   Navbar: the current-page (active) menu item follows the
   Design primary color. Uses Bootstrap's own navbar variable
   so it tracks whatever --bs-primary is set to on the Design
   tab — no per-color rule needed.
--------------------------------------------------------- */
.navbar {
	--bs-navbar-active-color: var(--bs-primary);
}

/* ---------------------------------------------------------
   Drag-and-drop file uploader (file-dropzone.js). Bootstrap
   has no dropzone primitive, so this is a small project
   utility. Colors use Bootstrap variables, so the dropzone
   follows the Design tab (e.g. --bs-primary on hover/drag).
--------------------------------------------------------- */
.bb-dropzone {
	border: 2px dashed var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.bb-dropzone:hover,
.bb-dropzone:focus-visible {
	border-color: var(--bs-primary);
	outline: none;
}
.bb-dropzone--over {
	border-color: var(--bs-primary);
	background-color: var(--bs-primary-bg-subtle);
}
.bb-dropzone__thumb {
	aspect-ratio: 1 / 1;
}
.bb-dropzone__thumb img {
	width: 100%;
	height: 100%;
}
.bb-dropzone__remove {
	position: absolute;
	top: .25rem;
	right: .25rem;
	padding: 0 .4rem;
	line-height: 1.4;
}

/* ---------------------------------------------------------
   Listing photo manager (listing-photos.js): a reorderable
   grid where the first thumbnail is the cover. Colors use
   Bootstrap variables, so it follows the Design tab.
--------------------------------------------------------- */
.bb-photos__item {
	aspect-ratio: 1 / 1;
	cursor: grab;
}
.bb-photos__item img {
	width: 100%;
	height: 100%;
}
.bb-photos__item--drag {
	opacity: .45;
}
.bb-photos__cover {
	position: absolute;
	top: .25rem;
	left: .25rem;
}
.bb-photos__cover-btn {
	position: absolute;
	top: .25rem;
	left: .25rem;
	padding: 0 .35rem;
	line-height: 1.4;
	opacity: .9;
}
.bb-photos__remove {
	position: absolute;
	top: .25rem;
	right: .25rem;
	padding: 0 .4rem;
	line-height: 1.4;
}

/* ---------------------------------------------------------
   Avatar / logo uploader: the circle is click + drop target
   (drag-and-drop feeds the Cropper.js modal in avatar-cropper.js).
--------------------------------------------------------- */
.js-wpv-avatar-preview {
	cursor: pointer;
}
.js-wpv-avatar-preview.bb-dropzone--over {
	outline: 3px dashed var(--bs-primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------
   Neutral accordion headers. Bootstrap tints the OPEN header
   with the theme primary; our primary is red, so an open
   section reads like a danger/error panel. Force a neutral
   open state (and a neutral chevron) instead. Bootstrap ships
   no variable to opt out of the primary-tinted active state.
--------------------------------------------------------- */
.accordion-button:not(.collapsed) {
	color: var(--bs-body-color);
	background-color: var(--bs-secondary-bg);
	box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
	background-image: var(--bs-accordion-btn-icon);
}

/* ----------------------------------------------------------
   My Listings action toolbar: on desktop the buttons show
   icon + label, but below the lg breakpoint the labels make
   the row overflow / wrap out of the card. On small screens
   hide the labels and show a full-width row of large,
   evenly-sized icon-only buttons (better tap targets).
---------------------------------------------------------- */
@media (max-width: 991.98px) {
	.bb-listing-actions {
		width: 100%;
	}
	.bb-listing-actions .btn-group {
		width: 100%;
	}
	.bb-listing-actions .bb-btn-label {
		display: none;
	}
	.bb-listing-actions .btn {
		flex: 1 1 0;
		font-size: 1.15rem;
		padding-top: .55rem;
		padding-bottom: .55rem;
	}
	.bb-listing-actions .btn i {
		margin-right: 0 !important;
	}
}