/*
|------------------------------------------------------------------------------
|  Sell to Us Form — Styles
|------------------------------------------------------------------------------
|  Purpose:
|     Styling for the Sell to Us form and the "at a glance" panels on the
|     Sell to Us page.
|
|  Design Notes:
|     - Bootstrap 5 (from the Bootscore theme) does most of the work. This file
|       only adds what Bootstrap has no utility for.
|     - The grey panel (#EEECEA, 10px radius) matches the site's Contact Form 7
|       enquiry forms so the new form looks like part of the same family.
|     - Only loaded on pages containing the [acf_sell_to_us_form] shortcode.
|
|------------------------------------------------------------------------------
*/

/*------------------------------------------------------------------------------
 |  reCAPTCHA Badge
 |------------------------------------------------------------------------------
 |  Hides Google's floating bottom-right badge on the Sell to Us page.
 |
 |  Notes:
 |     - ⚠️ Google allows hiding the badge ONLY when the reCAPTCHA notice with
 |       Privacy Policy and Terms links is shown in the form (templates/form.php,
 |       submit area). Remove that notice and this rule must go too.
 |     - visibility, not display: display:none stops reCAPTCHA working.
 |     - Scoped by this file only loading on the form page, so the badge on
 |       other pages (Contact Form 7) is unaffected.
 |
 ------------------------------------------------------------------------------*/

.grecaptcha-badge {
	visibility: hidden;
}

/*------------------------------------------------------------------------------
 |  Page Panels — applied to core Columns blocks via "Additional CSS class"
 ------------------------------------------------------------------------------*/

.acf-sell-to-us-panels {
	margin-block: 2rem;
}

.acf-sell-to-us-panel {
	background-color: #eeecea;
	border-radius: 10px;
	padding: 1.5rem;
}

.acf-sell-to-us-panel h3 {
	font-size: 1.25rem;
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.acf-sell-to-us-panel ul {
	padding-left: 1.1rem;
	margin-bottom: 0;
}

.acf-sell-to-us-panel li + li {
	margin-top: 0.35rem;
}

/*------------------------------------------------------------------------------
 |  Form Container And Sections
 ------------------------------------------------------------------------------*/

.acf-sell-to-us-form {
	background-color: #eeecea;
	border-radius: 10px;
	padding: 1.25rem;
	margin-bottom: 2rem;
}

@media (min-width: 768px) {
	.acf-sell-to-us-form {
		padding: 2rem;
	}
}

.acf-sell-to-us-form__section {
	border: 0;
	border-top: 1px solid rgba(1, 32, 63, 0.12);
	margin: 1.5rem 0 0;
	padding: 1.5rem 0 0;
	min-width: 0;
}

/*
 * Keep Bootstrap's float on <legend>. A floated legend behaves like an ordinary
 * heading; an un-floated one is drawn on the fieldset border and the fieldset's
 * top padding moves underneath it, leaving a large gap below the title.
 */
.acf-sell-to-us-form__section-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0;
}

/*
 * The gap between a section title and its content. It is padding on purpose:
 * the element after a floated legend clears the float, which swallows any
 * margin on it (and Bootstrap's .row relies on a negative margin). Change this
 * one value to tighten or loosen every section.
 */
.acf-sell-to-us-form__section-body {
	padding-top: 0.75rem;
}

.acf-sell-to-us-form__section-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--bs-primary, #01203f);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
}

.acf-sell-to-us-form .form-control,
.acf-sell-to-us-form .form-select {
	background-color: #fff;
}

/*
 * The theme draws .required-field-asterisk at font-size 2em with its own
 * line-height, which makes a required field's label (or a section title) taller
 * than one without it. Fields side by side then sit at different heights.
 * line-height: 0 keeps the big asterisk but stops it stretching its line.
 */
.acf-sell-to-us-form .required-field-asterisk {
	line-height: 0;
}

/*------------------------------------------------------------------------------
 |  Contact Alternatives — "Prefer to email or call instead?" bar
 |------------------------------------------------------------------------------
 |  Sits below the Send Enquiry button, inside the submit area, so it is the
 |  last thing a visitor sees if the form is not for them. The same panel is
 |  reused by the form-switched-off notice.
 |
 ------------------------------------------------------------------------------*/

.acf-sell-to-us-form__email-alternative {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background-color: #fff;
	border: 1px solid rgba(1, 32, 63, 0.15);
	border-radius: 10px;
	padding: 0.85rem 1rem;
	margin-top: 1.25rem;
}

.acf-sell-to-us-form__email-alternative-icon {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--bs-primary, #01203f);
}

.acf-sell-to-us-form__email-alternative a {
	font-weight: 700;
	/* The address is one long word — let it wrap on narrow phones */
	overflow-wrap: anywhere;
}

/*------------------------------------------------------------------------------
 |  Photo Picker
 ------------------------------------------------------------------------------*/

.acf-sell-to-us-form__photo-dropzone {
	border: 2px dashed rgba(1, 32, 63, 0.35);
	border-radius: 10px;
	background-color: #fff;
	padding: 1.5rem 1rem;
	text-align: center;
	transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.acf-sell-to-us-form__photo-dropzone.is-drag-over {
	border-color: var(--bs-primary, #01203f);
	background-color: #f3f6f9;
}

.acf-sell-to-us-form__photo-dropzone.is-invalid {
	border-color: var(--bs-form-invalid-border-color, #dc3545);
}

.acf-sell-to-us-form__photo-icon {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto 0.75rem;
	color: var(--bs-primary, #01203f);
}

.acf-sell-to-us-form__photo-previews {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 0.75rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.acf-sell-to-us-form__photo-previews:empty {
	display: none;
}

.acf-sell-to-us-form__photo-preview {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background-color: #ddd;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.acf-sell-to-us-form__photo-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.acf-sell-to-us-form__photo-preview--processing {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bs-primary, #01203f);
}

.acf-sell-to-us-form__photo-remove {
	position: absolute;
	top: 0.3rem;
	right: 0.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
}

.acf-sell-to-us-form__photo-remove:hover,
.acf-sell-to-us-form__photo-remove:focus-visible {
	background-color: #990129;
}

/* The photo error sits outside a form control, so Bootstrap never reveals it on its own */
.acf-sell-to-us-form [data-acf-sell-feedback-for="photos"]:not(:empty) {
	display: block;
}

/*------------------------------------------------------------------------------
 |  Spam Trap — off-screen rather than display:none, which some bots skip
 ------------------------------------------------------------------------------*/

.acf-sell-to-us-form__honeypot {
	position: absolute !important;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*------------------------------------------------------------------------------
 |  Submit Area And Thank-You Panel
 ------------------------------------------------------------------------------*/

.acf-sell-to-us-form__submit-area {
	border-top: 1px solid rgba(1, 32, 63, 0.12);
	margin-top: 1.75rem;
	padding-top: 1.75rem;
}

.acf-sell-to-us-form__success {
	background-color: #eeecea;
	border-radius: 10px;
	padding: 2.5rem 1.5rem;
	margin-bottom: 2rem;
	text-align: center;
}

.acf-sell-to-us-form__success:focus {
	outline: none;
}

.acf-sell-to-us-form__success-icon {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1rem;
	color: #198754;
}