/**
 * Tunnel public — styles isolés.
 *
 * IMPORTANT — On n'utilise volontairement PAS les classes Listeo
 * `.add-listing-section.type-selection` ni `.listing-type` ni
 * `.listing-type-container` car elles sont câblées à des handlers JS
 * de Listeo Core (frontend.js) qui font `preventDefault()` sur le
 * clic et tentent de soumettre `#submit-listing-form`. On reproduit
 * donc l'apparence avec nos propres classes.
 *
 * Couleur d’accent : alignée sur la marque / Customizer Listeo
 * (`custom.css.php` → `.listing-type-icon`, `.listing-type:hover`).
 * Sans cela, le tunnel affiche le gris Listeo par défaut (`#66676b`)
 * alors que le formulaire connecté utilise la couleur principale du site.
 */

:root {
	--bv-public-tunnel-accent: #f96c3a;
	--bv-public-tunnel-accent-rgb: 249, 108, 58;
}

/* =========================================================================
   STEP PREVIEW — Onglets de navigation (sidebar, sans logo)
   ========================================================================= */

/*
 * On réutilise .listing-manager-tabs et .listing-manager-wrapper de Listeo
 * pour bénéficier des styles existants du thème parent.
 * .bv-public-tunnel-tabs n'ajoute que les ajustements propres au tunnel :
 * suppression du logo (absent), position collée en haut de la sidebar.
 */
.bv-public-tunnel-tabs {
    margin-top: 0;
}


/* Section générale — miroir exact de .add-listing-section.
   On N'utilise PAS .add-listing-section sur le step-type car la
   combinaison .add-listing-section.type-selection est interceptée
   par le JS Listeo Core (frontend.js).  */
.bv-public-tunnel-section {
	position: relative;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.06);
	padding: 0 20px 25px 20px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 40px;
}

/* Bandeau titre — miroir exact de .add-listing-headline */
.bv-public-tunnel-headline {
	width: calc(100% + 40px);
	left: -20px;
	position: relative;
	padding: 30px 40px;
	margin: 0 0 30px 0;
	border-radius: 4px 4px 0 0;
	background-color: #fcfcfc;
	border-bottom: 1px solid #eaeaea;
}

.bv-public-tunnel-headline h3 {
	padding: 0;
	margin: 0;
	line-height: 32px;
	font-size: 22px;
	position: relative;
	top: 1px;
}

.bv-public-tunnel-headline i {
	padding-right: 7px;
	display: inline-block;
	position: relative;
	top: 1px;
}

/* Grille des types (équivalent .listing-type-container) */
.bv-public-tunnel-types-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 30px;
	width: 100%;
	padding: 0 20px;
}

/* Carte « type d'annonce » (équivalent .listing-type) */
.bv-public-tunnel-type-card {
	flex: 1;
	border-radius: 4px;
	background-color: #f6f6f6;
	margin: 0;
	text-align: center;
	padding: 35px;
	transition: 0.4s;
	display: block;
	color: inherit;
	text-decoration: none;
}

.bv-public-tunnel-type-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
	background-color: var(--bv-public-tunnel-accent);
	color: inherit;
}

.bv-public-tunnel-type-card h3 {
	transition: 0.4s;
	padding: 0;
	margin: 22px 0 0 0;
	font-size: 18px;
	font-weight: 500;
}

.bv-public-tunnel-type-card:hover h3 {
	color: #fff;
}

/* Pastille d'icône — on conserve la classe `.listing-type-icon` car
   elle est posée par le helper `bv_render_listing_type_icon()` du
   thème enfant (08-listing-types-helpers.php) et qu'on souhaite
   réutiliser ce helper pour la cohérence visuelle. La classe en
   elle-même n'est pas câblée à un handler JS Listeo. */
.bv-public-tunnel-type-card .listing-type-icon {
	width: 60px;
	height: 60px;
	line-height: 60px;
	display: inline-block;
	background-color: var(--bv-public-tunnel-accent);
	box-shadow: 0 0 0 8px rgba(var(--bv-public-tunnel-accent-rgb), 0.1);
	color: #fff;
	font-size: 28px;
	border-radius: 200px;
	transition: 0.4s;
}

.bv-public-tunnel-type-card:hover .listing-type-icon {
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2);
	color: var(--bv-public-tunnel-accent);
}

/* SVG : blanc sur pastille orange ; au survol, même logique que le Customizer Listeo (fill = couleur principale). */
.bv-public-tunnel-type-card .listing-type-icon svg g,
.bv-public-tunnel-type-card .listing-type-icon svg circle,
.bv-public-tunnel-type-card .listing-type-icon svg rect,
.bv-public-tunnel-type-card .listing-type-icon svg path {
	fill: #fff;
	transition: 0.2s;
}

.bv-public-tunnel-type-card:hover .listing-type-icon svg g,
.bv-public-tunnel-type-card:hover .listing-type-icon svg circle,
.bv-public-tunnel-type-card:hover .listing-type-icon svg rect,
.bv-public-tunnel-type-card:hover .listing-type-icon svg path {
	fill: var(--bv-public-tunnel-accent);
}

.bv-public-tunnel-type-card .listing-type-icon svg {
	height: 30px;
	width: auto;
	vertical-align: middle;
	margin-top: -10px;
}

.bv-public-tunnel-type-desc {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--bv-public-tunnel-accent);
	font-weight: 500;
}

.bv-public-tunnel-type-card:hover .bv-public-tunnel-type-desc {
	color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1240px) {
	.bv-public-tunnel-types-grid {
		grid-template-columns: 1fr;
	}
}

/* Le type sélectionné est transmis en champ caché (_listing_type) ;
   la barre de type a été supprimée pour rester identique à la version connectée. */

/* Erreurs sous champs */
.bv-public-tunnel-field-error {
	color: #c13430;
	font-size: 13px;
	margin: 6px 0 0;
}

/* Champs en erreur — cible .input-text, .input-textarea et .chosen-select-no-single
   à l'intérieur du wrapper tunnel public (div.bv-public-tunnel). */
.bv-public-tunnel .has-error,
.bv-public-tunnel .input-text.has-error,
.bv-public-tunnel .input-textarea.has-error,
.bv-public-tunnel .chosen-select-no-single.has-error {
	border-color: #c13430 !important;
	background-color: #fff8f8;
}

.bv-public-tunnel-errors-summary {
	margin-bottom: 20px;
}

.bv-public-tunnel-errors-summary ul {
	margin: 8px 0 0 18px;
	padding: 0;
}

/* Résumé final / placeholder Lot 4 */
.bv-public-tunnel--step-submit-done .bv-public-tunnel-summary {
	list-style: none;
	margin: 12px 0;
	padding: 0;
}

.bv-public-tunnel--step-submit-done .bv-public-tunnel-summary li {
	padding: 4px 0;
}

/* Le bouton de soumission utilise la classe Listeo .button.margin-top-20
   (même classe que le formulaire connecté) — pas de règle custom nécessaire. */

/* =========================================================================
   STEP PREVIEW — Récapitulatif listing + formulaire d'inscription
   =========================================================================
   La section recap réutilise la structure de listing-preview.php de Listeo
   Core (listing_preview_container → #titlebar → #listing-overview) pour
   que le rendu visuel soit identique à la page add-listing standard.

   PROBLÈME : la règle globale Listeo
       #titlebar { background-color: #f8f8f8; padding: 70px 0; margin-bottom: 55px; }
   s'applique à TOUS les #titlebar, et la contre-règle
       #titlebar.listing-titlebar { background: transparent; }
   ne suffit pas toujours (ordre de chargement, media queries).
   On force les valeurs correctes dans notre contexte.
   ========================================================================= */

/* Override du fond gris global sur #titlebar pour la preview tunnel */
.bv-public-tunnel--step-preview #titlebar.listing-titlebar {
    background: transparent !important;
    padding-top: 0;
    padding-bottom: 20px;
    margin-bottom: 0;
}

/* Intro sous le titre de section (form inscription) */
.bv-public-tunnel-reg-intro {
	margin: -10px 0 20px;
	color: #666;
	font-size: 14px;
}

/* Placeholder Lot 5 */
.bv-public-tunnel-lot5-placeholder {
	margin-top: 20px;
}

/* Galerie preview — grille de miniatures dans la section #listing-gallery */
.bv-pt-preview-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.bv-pt-preview-photo {
	width: 160px;
	height: 120px;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
}

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

@media (max-width: 767px) {
	.bv-pt-preview-photo {
		width: 120px;
		height: 90px;
	}
}

/* -------------------------------------------------------------------------
   Formulaire d'inscription
   Le sélecteur de rôle (.account-type), les champs (p.form-row.form-row-wide,
   input.input-text), la case CGU (p.form-row.checkboxes) et le bouton
   (input.button.border.fw) utilisent les classes CSS natives de Listeo via
   .sign-in-form (label position:relative, icon position:absolute, padding-left).
   Seules les règles propres à notre contexte sont ajoutées ici.
   ------------------------------------------------------------------------- */

/* Largeur identique à la page d'inscription native (col-lg-5 ≈ 560 px), centré */
.bv-pt-reg-form-wrapper {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

/* Feedback pseudo live */
#bv-pt-pseudo-feedback-row {
	margin-top: 5px;
}


/* =========================================================================
   GALERIE PHOTOS (Lot 3)
   ========================================================================= */

/* Zone de dépôt — reproduit le style Dropzone de Listeo (files.php + frontend CSS) */
.bv-pt-gallery-zone {
	cursor: pointer;
	margin-bottom: 12px;
}

/* Réutilise .dropzone .dz-default.dz-message de Listeo ; on surcharge
   uniquement ce qui diffère pour notre contexte invité. */
.bv-pt-gallery-zone .bv-pt-gallery-label {
	display: block;
	cursor: pointer;
	width: 100%;
	margin: 0;
}

.bv-pt-gallery-zone--full {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Compteur */
.bv-pt-gallery-counter-wrap {
	font-size: 13px;
	color: #777;
	margin: 0 0 12px;
}

/* Grille de miniatures */
.bv-pt-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.bv-pt-gallery-thumb {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 4px;
	overflow: hidden;
	background: #f0f0f0;
	border: 1px solid #e0e0e0;
	flex-shrink: 0;
}

/* Placeholder chargement */
.bv-pt-gallery-thumb--loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 6px;
}

.bv-pt-gallery-thumb-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	width: 0;
	background: var(--bv-public-tunnel-accent);
	transition: width 0.15s;
}

.bv-pt-gallery-thumb-name {
	font-size: 10px;
	color: #888;
	padding: 0 4px;
	text-align: center;
	word-break: break-all;
	line-height: 1.2;
}

/* Miniature chargée */
.bv-pt-gallery-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Bouton suppression */
.bv-pt-gallery-thumb-remove {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s;
	padding: 0;
}

.bv-pt-gallery-thumb:hover .bv-pt-gallery-thumb-remove {
	opacity: 1;
}

/* Suppression en cours */
.bv-pt-gallery-thumb--removing {
	opacity: 0.4;
	pointer-events: none;
}

/* Messages d'erreur galerie */
.bv-pt-gallery-errors {
	margin-top: 6px;
}

.bv-pt-gallery-error {
	color: #c13430;
	font-size: 13px;
	margin: 4px 0 0;
}

@media (max-width: 767px) {
	.bv-pt-gallery-thumb {
		width: 80px;
		height: 80px;
	}
}

/* Autocomplétion adresse (étape submit) */
.bv-public-tunnel-address-suggestions {
	list-style: none;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 50;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	max-height: 220px;
	overflow-y: auto;
	width: 100%;
	margin: 4px 0 0;
	padding: 0;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.bv-public-tunnel-address-suggestion {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.35;
}

.bv-public-tunnel-address-suggestion:hover,
.bv-public-tunnel-address-suggestion:focus,
.bv-public-tunnel-address-suggestion.is-active {
	background: #f6f6f6;
	outline: none;
}

.bv-public-tunnel-address-empty {
	padding: 8px 12px;
	font-size: 13px;
	color: #999;
	font-style: italic;
}

.bv-public-tunnel-address-error {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 2px);
	font-size: 12px;
	color: #e74c3c;
	z-index: 48;
	pointer-events: none;
}

input.bv-address-error {
	border-color: #e74c3c !important;
}

/* -------------------------------------------------------------------------
   Formulaire de connexion inline (STEP_PREVIEW) — intégré dans le bloc inscription
   ------------------------------------------------------------------------- */

/* Bouton toggle — même style que .button.border.fw */
.bv-pt-login-toggle-btn {
	margin-bottom: 0;
}

/* Champs de connexion — légère marge au-dessus quand visibles */
#bv-pt-login-fields {
	margin-top: 16px;
}

/* Bouton "Se connecter et publier" — fond orange comme le bouton principal */
.bv-pt-login-submit-btn {
	background-color: #f0512b;
	color: #fff !important;
	border-color: #f0512b;
	margin-bottom: 0;
}

.bv-pt-login-submit-btn:hover {
	background-color: #d93f1b;
	border-color: #d93f1b;
}

/* Garantit la visibilité des icônes dans les champs du tunnel.
   custom.js de Listeo enveloppe input[type=password] dans un <div> sur
   DOMContentLoaded, ce qui fait s'effondrer la <label> et masque l'icône
   sl positionnée absolument. Le CSS ci-dessous est réévalué à chaque
   repaint, donc persiste après n'importe quel wrapping JS. */

/* Formulaire de connexion */
#bv-pt-login-form .form-row label {
	display: block;
	position: relative;
	min-height: 53px;
}

#bv-pt-login-form .form-row label i.sl {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	bottom: auto;
	font-size: 16px;
	color: #a0a0a0;
	pointer-events: none;
	z-index: 1;
}

/* Champ mot de passe du formulaire d'inscription (même problème) */
#bv-pt-password-row label {
	display: block;
	position: relative;
	min-height: 53px;
}

#bv-pt-password-row label > i.sl {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	bottom: auto;
	font-size: 16px;
	color: #a0a0a0;
	pointer-events: none;
	z-index: 1;
}