/* Add Trophy form — Bootstrap 5, reskinned to the theme's brand color/font. */

/*
 * The theme's own style.css applies a global padding/line-height to every
 * select/text-like-input/textarea, which fights with Bootstrap's .form-control
 * / .form-select padding and made some fields (e.g. Fish) render at a
 * different height than others. Reassert Bootstrap's own box model here so
 * every control in this form is a consistent height regardless of load order.
 */
.fwp-bs-form-wrap,
.fwp-bs-form-wrap button,
.fwp-bs-form-wrap input,
.fwp-bs-form-wrap select,
.fwp-bs-form-wrap textarea,
.fwp-bs-form-wrap .btn,
.fwp-bs-form-wrap .form-label,
.fwp-bs-form-wrap .form-text,
.fwp-bs-form-wrap .form-check-label {
	font-family: var( --bs-body-font-family, inherit ) !important;
}

.fwp-bs-form-wrap .form-control,
.fwp-bs-form-wrap .form-select {
	height: calc( 1.5em + 0.75rem + 2px ) !important;
	padding: 0.375rem 0.75rem !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	border-radius: 0.375rem !important;
}

/* Everything else in the form (labels, help text, buttons, the
   multiselect/fish-picker's own text) should share the same type scale as
   the inputs, instead of inheriting the theme's global 17px base. */
.fwp-bs-form-wrap .form-label,
.fwp-bs-form-wrap .form-check-label {
	font-size: 1rem !important;
}

.fwp-bs-form-wrap .form-text {
	font-size: 0.875rem !important;
}

.fwp-bs-form-wrap .btn {
	font-size: 1rem !important;
}

.fwp-bs-form-wrap .btn-sm {
	font-size: 0.875rem !important;
}

.fwp-bs-form-wrap .fwp-multiselect-button,
.fwp-bs-form-wrap .fwp-fish-picker-toggle,
.fwp-bs-form-wrap .multiselect-container .form-check-label,
.fwp-bs-form-wrap .fwp-fish-picker-item {
	font-size: 1rem !important;
}

.fwp-bs-form-wrap .fwp-trophy-map {
	width: 100%;
	height: 300px;
	border-radius: 4px;
	border: 1px solid var( --bs-border-color, #dee2e6 );
}

.fwp-bs-form-wrap {
	--bs-primary: #0099e5;
	--bs-primary-rgb: 0, 153, 229;
	--bs-body-font-family: inherit;
	--bs-border-radius: 4px;
}

.fwp-bs-form-wrap .btn-primary {
	--bs-btn-bg: var( --bs-primary );
	--bs-btn-border-color: var( --bs-primary );
	--bs-btn-hover-bg: #0087cc;
	--bs-btn-hover-border-color: #0087cc;
	--bs-btn-active-bg: #0077b3;
	--bs-btn-active-border-color: #0077b3;
}

.fwp-bs-form-wrap .form-control:focus,
.fwp-bs-form-wrap .form-select:focus {
	border-color: var( --bs-primary );
	box-shadow: 0 0 0 0.2rem rgba( 0, 153, 229, 0.25 );
}

.fwp-bs-form-wrap .card {
	border: none;
	border-radius: 8px;
}

/* Bootstrap Multiselect button/dropdown, reskinned to match the other form-controls */
.fwp-bs-form-wrap .fwp-multiselect-button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	font-weight: 400;
}

.fwp-bs-form-wrap .fwp-multiselect-container {
	position: relative;
}

.fwp-bs-form-wrap .multiselect-container.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 2px;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.08 );
}

.fwp-bs-form-wrap .multiselect-container .form-check-input:checked {
	background-color: var( --bs-primary );
	border-color: var( --bs-primary );
}

/* Fish picker: a Bootstrap dropdown showing a thumbnail before each fish name */
.fwp-bs-form-wrap .fwp-fish-picker {
	position: relative;
}

.fwp-bs-form-wrap .fwp-fish-picker-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	font-weight: 400;
}

.fwp-bs-form-wrap .fwp-fish-picker-toggle:disabled {
	background-color: var( --bs-secondary-bg, #e9ecef );
	opacity: 1;
}

.fwp-bs-form-wrap .fwp-fish-picker-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin-top: 2px;
	max-height: 260px;
	overflow-y: auto;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.08 );
}

.fwp-bs-form-wrap .fwp-fish-picker-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fwp-bs-form-wrap .fwp-fish-picker-thumb {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.fwp-bs-form-wrap .fwp-fish-picker-item.active,
.fwp-bs-form-wrap .fwp-fish-picker-item:active {
	background-color: var( --bs-primary );
	color: #fff;
}