/* ProchPro overrides (loaded after theme)
	 Goal: make avatars/logos/service thumbnails look crisp and consistent
	 without changing the theme layout.
*/

/* Safer default for inline images */
img {
	max-width: 100%;
	height: auto;
}

/* Remove the baseline gap under images in cards/links */
img,
.shine-box img,
.job-comapny-logo img,
.sf-testimonial-media img,
.sf-jobs-media img {
	display: block;
}

/* Square/rounded logo containers: always fill and crop nicely */
.job_listings.job_listings-two li.job_listing .job-comapny-logo img,
.aon-post-jobs2 .job-comapny-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Round logo containers (default theme uses height:auto which can letterbox) */
ul.job_listings .job_listing .job-comapny-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Testimonial / job header avatars */
.sf-testimonial-user .sf-testimonial-media img,
.sf-jobs-section .sf-jobs-head .sf-jobs-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Utility classes for views that already set w/h */
.pp-img-cover { object-fit: cover; }
.pp-img-contain { object-fit: contain; }

/* -------------------------------------------------
   Bootstrap 4 compatibility: gap-* utilities
   Many views use Bootstrap 5 `gap-*` classes, but the theme is Bootstrap 4.
   This shim restores spacing (especially between buttons) without rewriting views.
-------------------------------------------------- */

/* Preferred modern implementation */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Fallback for browsers without flex-gap support */
@supports not (gap: 1rem) {
	.d-flex.gap-1 > * { margin-right: 0.25rem; margin-bottom: 0.25rem; }
	.d-flex.gap-2 > * { margin-right: 0.5rem;  margin-bottom: 0.5rem; }
	.d-flex.gap-3 > * { margin-right: 1rem;    margin-bottom: 1rem; }
	.d-flex.gap-4 > * { margin-right: 1.5rem;  margin-bottom: 1.5rem; }
	.d-flex.gap-5 > * { margin-right: 3rem;    margin-bottom: 3rem; }

	.d-flex.gap-1 > :last-child,
	.d-flex.gap-2 > :last-child,
	.d-flex.gap-3 > :last-child,
	.d-flex.gap-4 > :last-child,
	.d-flex.gap-5 > :last-child { margin-right: 0; }
}

/* Center the yellow step icons (How it works) */
.aon-step-section .aon-step-icon span {
	/* Theme uses line-height centering + rotation; flex is more reliable */
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: normal;
}

.aon-step-section .aon-step-icon span > i {
	display: flex;
	align-items: center;
	justify-content: center;
}

.aon-step-section .aon-step-icon span img {
	display: block;
}

/* Center the 'Why choose us' icons */
.aon-whycoose-area .sf-w-choose-icon span {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: normal;
}

.aon-whycoose-area .sf-w-choose-icon span img {
	display: block;
}

/* Center the 'Pourquoi nous rejoindre ?' (why-choose2) icons */
.aon-why-choose2-area .aon-w-choose-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: normal;
}

.aon-why-choose2-area .aon-w-choose-icon > i {
	display: flex;
	align-items: center;
	justify-content: center;
}

.aon-why-choose2-area .aon-w-choose-icon img {
	display: block;
}

/* Bootstrap-select: keep selected value on one line (theme overrides can make it wrap) */
.bootstrap-select .dropdown-toggle .filter-option {
	height: 100%;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Home: catégories populaires (carousel) — cartes de taille uniforme */
.categories-carousel-owl .owl-stage {
	display: flex;
}

.categories-carousel-owl .owl-item {
	display: flex;
}

.categories-carousel-owl .item {
	display: flex;
	width: 100%;
}

/* Blog (/blog): cards based on theme 'sf-jobs-section' but with rectangular cover images */
.pp-blog-card .sf-jobs-head {
	display: block;
	margin-bottom: 18px;
}

.pp-blog-card .sf-jobs-head .sf-jobs-media {
	border-radius: 18px;
	overflow: hidden;
	position: relative;
	top: 0;
	margin-bottom: 12px;
	box-shadow: none;
	display: block;
	width: 100%;
}

.pp-blog-card .sf-jobs-head .sf-jobs-media img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

@media only screen and (max-width: 575px) {
	.pp-blog-card .sf-jobs-head .sf-jobs-media img {
		height: 180px;
	}
}

.pp-blog-card .sf-jobs-head .sf-jobs-position {
	display: inline-block;
	margin-top: 6px;
}

.categories-carousel-owl .aon-cat-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Le thème agrandit l'item centré; on le désactive ici pour uniformiser les tailles */
.categories-carousel-owl .center .aon-cat-item {
	-webkit-transform: none;
	-moz-transform: none;
	-o-transform: none;
	-ms-transform: none;
	transform: none;
}

.categories-carousel-owl .aon-cat-pic {
	flex: 0 0 auto;
	height: 180px;
	overflow: hidden;
}

.categories-carousel-owl .aon-cat-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.categories-carousel-owl .aon-cat-title {
	flex: 0 0 auto;
	padding: 0 10px;
	height: 2.8em; /* ~2 lignes */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* -------------------------------------------------
   Téléphone: intl-tel-input (Bootstrap 4 + modales)
-------------------------------------------------- */

/* Remplit la largeur comme un form-control standard */
.iti {
	width: 100%;
}

/* Dropdown pays au-dessus des modales Bootstrap */
.iti__dropdown-content,
.iti__country-list {
	z-index: 1055;
}

/* Thème: l'icône overlay (aon-input-icon) recouvre le sélecteur pays de intl-tel-input.
   Quand un input est transformé en `.iti`, on masque cette icône pour garder une zone cliquable fiable. */
.aon-inputicon-box .iti + .aon-input-icon {
	display: none;
}

/* L’input doit garder le style Bootstrap */
.iti input.form-control {
	width: 100%;
}

/* Le thème peut forcer un padding-left fixe sur `.form-control` (ex: `.aon-inputicon-box .form-control { padding-left: 35px; }`).
   Sur mobile, cela peut chevaucher/couper le drapeau + indicatif.
   On force ici les paddings attendus par intl-tel-input (toujours après le thème). */
.iti--allow-dropdown input.iti__tel-input.form-control,
.iti--allow-dropdown input.iti__tel-input[type=tel].form-control,
.iti--allow-dropdown input.iti__tel-input[type=text].form-control,
.iti--show-selected-dial-code input.iti__tel-input.form-control,
.iti--show-selected-dial-code input.iti__tel-input[type=tel].form-control,
.iti--show-selected-dial-code input.iti__tel-input[type=text].form-control {
	padding-left: var(--iti-selected-country-arrow-padding, 52px) !important;
	padding-right: var(--iti-input-padding, 6px) !important;
}

[dir="rtl"] .iti--allow-dropdown input.iti__tel-input.form-control,
[dir="rtl"] .iti--allow-dropdown input.iti__tel-input[type=tel].form-control,
[dir="rtl"] .iti--allow-dropdown input.iti__tel-input[type=text].form-control,
[dir="rtl"] .iti--show-selected-dial-code input.iti__tel-input.form-control,
[dir="rtl"] .iti--show-selected-dial-code input.iti__tel-input[type=tel].form-control,
[dir="rtl"] .iti--show-selected-dial-code input.iti__tel-input[type=text].form-control {
	padding-right: var(--iti-selected-country-arrow-padding, 52px) !important;
	padding-left: var(--iti-input-padding, 6px) !important;
}

/* Le sélecteur pays doit rester cliquable au-dessus des overlays du thème */
.iti__country-container {
	z-index: 6;
}

@media (max-width: 767px) {
	.categories-carousel-owl .aon-cat-pic {
		height: 140px;
	}
}

/* -------------------------------------------------
   AppUI: toast container (Bootstrap alerts)
-------------------------------------------------- */

.pp-toast-container {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 2147483000;
	width: 360px;
	max-width: calc(100vw - 32px);
}

.pp-toast {
	margin-bottom: 10px;
}

.pp-toast-title {
	font-weight: 600;
	margin-right: 22px;
}

.pp-toast-message {
	margin-top: 4px;
	white-space: pre-line;
}

/* -------------------------------------------------
   Boutons d’action (états idle/loading/success/error)
   Objectif: anti double-clic + feedback visuel cohérent
   - Compatible Bootstrap 4 (pas de nouvelle palette)
   - Fonctionne sur button, input[type=submit], a
-------------------------------------------------- */

.pp-btn-action {
	position: relative;
	touch-action: manipulation;
}

/* Empêche les doubles clics pendant l’opération */
.pp-btn-action[data-pp-state="loading"],
.pp-btn-action[data-pp-state="success"],
.pp-btn-action[data-pp-state="error"] {
	pointer-events: none;
}

/* Loader: petit spinner (couleur = currentColor) */
.pp-btn-action[data-pp-state="loading"]::after {
	content: "";
	position: absolute;
	right: 0.75rem;
	top: 50%;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: pp-spin 0.65s linear infinite;
	opacity: 0.9;
}

@keyframes pp-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Structure optionnelle: conserve icônes/HTML d’origine sur <button> */
.pp-btn-action .pp-btn-inner {
	display: inline;
}

.pp-btn-action .pp-btn-label {
	display: none;
}

.pp-btn-action[data-pp-state="loading"] .pp-btn-inner,
.pp-btn-action[data-pp-state="success"] .pp-btn-inner,
.pp-btn-action[data-pp-state="error"] .pp-btn-inner {
	visibility: hidden; /* garde la place (évite le layout shift) */
}

.pp-btn-action[data-pp-state="loading"] .pp-btn-label,
.pp-btn-action[data-pp-state="success"] .pp-btn-label,
.pp-btn-action[data-pp-state="error"] .pp-btn-label {
	display: inline;
}

/* Petit feedback d’état (sans nouvelle palette) */
.pp-btn-action[data-pp-state="loading"] {
	opacity: 0.85;
}

.pp-btn-action[data-pp-state="success"],
.pp-btn-action[data-pp-state="error"] {
	opacity: 0.95;
}

/* Accessibilité: quand aria-disabled, on force le curseur */
.pp-btn-action[aria-disabled="true"] {
	cursor: not-allowed;
}

/* -------------------------------------------------
   Boutons: état de chargement stable (PWA / mobile-first)
   Objectif: aucun débordement, aucun layout shift (CLS)
   Structure imposée:
   <button class="... btn-loading" type="button">
     <span class="btn-content">
       <span class="btn-text">...</span>
       <span class="btn-loader"></span>
     </span>
   </button>
-------------------------------------------------- */

.btn-loading {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
}

.btn-loading .btn-content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.btn-loading .btn-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

/* Empêche les icônes (SVG/font/img) de casser le layout */
.btn-loading .btn-text i,
.btn-loading .btn-text svg,
.btn-loading .btn-text img,
.btn-loading .btn-content i,
.btn-loading .btn-content svg,
.btn-loading .btn-content img {
	flex-shrink: 0;
	max-width: 1.25em;
	max-height: 1.25em;
}

.btn-loading .btn-loader {
	width: 16px;
	height: 16px;
	border: 2px solid transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	display: inline-block; /* Toujours dans le flux -> pas de shift */
	flex-shrink: 0;
	visibility: hidden;
	opacity: 0;
	animation: pp-btn-spin 0.6s linear infinite;
	transition: opacity 150ms ease;
}

@keyframes pp-btn-spin {
	to { transform: rotate(360deg); }
}

/* état loading */
.btn-loading.is-loading {
	pointer-events: none;
}

.btn-loading.is-loading .btn-text {
	opacity: 0.7;
	transition: opacity 150ms ease;
}

.btn-loading.is-loading .btn-loader {
	visibility: visible;
	opacity: 0.95;
}

/* Option UX: loader seul centré (pas de shift) */
.btn-loading.is-loading.is-loading-only .btn-text {
	visibility: hidden;
}

/* Compat: si AppUI utilise data-pp-state=loading sur un bouton btn-loading,
   on désactive le pseudo-loader ::after pour éviter les doublons. */
.pp-btn-action.btn-loading[data-pp-state="loading"]::after {
	content: none;
}

/* éviter débordement mobile */
@media (max-width: 576px) {
	.btn-loading {
		font-size: 14px;
	}

	.btn-loading:not(.btn-lg):not(.btn-sm) {
		padding: 10px 12px;
	}

	.btn-loading .btn-loader {
		width: 14px;
		height: 14px;
	}
}