/**
 * Styles publics pour le plugin DJMA Custom Search.
 */

/* Offcanvas de recherche : caché par défaut, visible uniquement après clic */
.off-canvas-wrapper .djma-site-search#offCanvasTop1 {
	display: none;
}

.off-canvas-wrapper .djma-site-search#offCanvasTop1.is-visible {
	display: block;
	padding: 22px;
}

.off-canvas-wrapper .djma-site-search#offCanvasTop1 .site-search-close {
	display: none;
}

.off-canvas-wrapper .djma-site-search#offCanvasTop1.is-visible .site-search-close {
	display: block;
}

.djma-site-search#offCanvasTop1 {
	background-color: white;
}

.close-button.site-search-close {
    position: absolute;
    right: 4%;
    font-size: 38px;
    top: 10px;
	cursor: pointer;
}

/* Quand la recherche offcanvas est ouverte, cacher la navigation desktop sous le header */
body.search-offcanvas-open .show-for-large.main-navigation.align_center.under-header-navigation {
	display: none;
}

/* Saut de ligne dans le titre : uniquement sur mobile */
.djma-search-header__break {
	display: none;
}

@media (max-width: 767px) {
	.djma-search-header__break {
		display: inline;
	}
}

/* Mobile : quand l'offcanvas est ouvert, masquer le trigger du header */
@media (max-width: 1023px) {

	.djma-close-search__icon {
		background-color: white;
		padding: 6px 10px;;
	}

	body.search-offcanvas-open .offcanvas-search-bar.tools_button {
		display: none;
	}

	.offcanvas-search-bar.mobile::after {
        content: "";
        display: block;
        height: 1px;
        background-color: #E2E8F0;
        margin-top: 13px;
		margin-left: -20px;
		margin-right: -15px;
	}

	.djma-start-search {
		margin-top: 50px;
	}

	.djma-search-layout {
		padding-top: 10px;
	}
}

.djma-search-results--loading {
	min-height: 200px;
}

.djma-search-results__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	padding: 32px 20px;
	text-align: center;
}

.djma-search-results__spinner {
	width: 38px;
	height: 38px;
	border: 3px solid #E2E8F0;
	border-top-color: #00B761;
	border-radius: 50%;
	animation: djma-search-results-spin 0.8s linear infinite;
}

@keyframes djma-search-results-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.djma-site-search .woocommerce .products h3 a,
.djma-site-search .woocommerce .products ul h3 a {
	font-size: 1em !important;
	font-weight: 600;
	text-transform: capitalize;
}

/* Styles d'image de catégorie (mêmes que le sous-menu) */
.djma-search-category__img img {
	width: 59px !important;
	height: 59px !important;
	object-fit: contain;
	margin-right: 16px;
	vertical-align: middle;
	display: inline-block;
	border: 1px solid var(--Slate-100, #F1F5F9);
	background: var(--Primary-White, #FFF);
	border-radius: 50%;
	padding: 4px;
	width: 100%;
}

.shop-product-card--search-result .shop-product-card__link {
	margin-right: 18px;
}

.djma-ajax-search-article__link {
	display: block;
	width: 100%;
	cursor: pointer;
}

.djma-ajax-search-category__link {
	display: block;
	width: 100%;
	cursor: pointer;
}

/* Layout 3 colonnes pour les résultats AJAX */
.djma-search-layout {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	align-items: flex-start;
	max-width: 100em;
	margin: 0 auto;
}

.djma-search-result {
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	margin-bottom: 10px !important;
	display: flex;
	cursor: pointer;
}

/* Colonnes */
.djma-search-column {
	display: flex;
	flex-direction: column;
	min-height: 190px;
}

@media (min-width: 764px) {
	.djma-search-column {
		min-height: 190px;
	}
}

/* Page résultats (posts) : grille 3 colonnes */
.djma-search-column--posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: stretch;
}

@media (min-width: 640px) {
	.djma-search-column--posts {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.djma-search-column--posts {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.djma-search-column--posts .djma-search-result {
	margin-bottom: 0 !important; /* la grille gère l'espacement */
}

.djma-search-column--posts .djma-ajax-search-article__link {
	height: 100%;
}

.djma-search-column--posts .djma-search-article {
	height: 100%;
}

.djma-search-article__image {
	aspect-ratio: 300 / 169;
    overflow: hidden;
	width: 100%;
	border-radius: 7px;
}

.djma-search-article__image img {
	display: block;
	width: 100%;
	height: auto;
}

.djma-search-article__category {
    color: #64748B;
    font-weight: 600;
}

.djma-search-pagination {
	display: inline-block;
	margin-top: 40px;
}

.djma-posts-load-more-wrapper {
	padding-top: 20px;
	padding-bottom: 20px;
}

.djma-posts-load-more-wrapper[hidden] {
	display: none !important;
}

.djma-posts-load-more {
	color: #30B457;
    background: none;
    width: fit-content;
    margin: auto;
    padding: 14px 20px;
    border: 1px solid #30B457;
    border-radius: 10px !important;
    outline: none;
    cursor: pointer;
    -webkit-transition: .3s ease !important;
    transition: .3s ease;
	font-size: 13px;
    letter-spacing: 2px;
    font-weight: 600;
}

.djma-posts-load-more:hover:not(:disabled) {
	color: #fff;
	background: #30B457;
}

.djma-posts-load-more:disabled {
	cursor: wait;
	opacity: 1;
}

.offcanvas-search-bar.mobile {
	padding: 7px 20px 0px 20px;
}

.djma-posts-load-more.is-finished,
.djma-posts-load-more.is-finished:hover,
.djma-posts-load-more.is-finished:disabled {
	color: #94A3B8 !important;
	background: transparent !important;
	border-color: #30B457 !important;
	box-shadow: none !important;
	cursor: default;
}

.djma-posts-load-more.is-loading,
.djma-posts-load-more.is-loading:hover,
.djma-posts-load-more.is-loading:disabled {
	color: inherit !important;
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.djma-posts-load-more.is-loading .djma-posts-load-more__label {
	animation: djma-posts-load-more-pulse 0.9s ease-in-out infinite;
}

@keyframes djma-posts-load-more-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.45;
	}
}

.djma-search-pagination-item {
	border: none;
    background: none;
    display: block;
    padding: 0;
    margin: 0;
    float: left;
    overflow: hidden;
}

.djma-search-post-body {
	padding: 10px;
}

.djma-search-article__title {
	font-size: 14px;
	font-weight: 500;
}

.djma-search-column__view-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 8px 20px;
	border-radius: 6px;
	color: #244135;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	background-color: #E3F9EF;
}

.djma-search-post-simple {
	padding: 10px;
}

.djma-search-category {
	padding: 10px;
	display: flex;
	align-items: center;
}

.djma-search-category__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.djma-search-category__parent {
	font-size: 12px;
	font-weight: 600;
    color: #475569;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.columns.djma-search-scoped-results.djma-search-scoped-results--posts {
	padding-right: 0.2rem;
    padding-left: 0.2rem;
}

.djma-search-category__icon {
	font-size: 30px;
	margin-left: auto; /* Push à droite dans un parent flex */
	display: inline-flex;
	align-items: center;
}

.djma-search-category__icon img {
	display: block;
	width: 24px;
	height: 24px;
}

.djma-close-search__icon {
	font-size: 26px;
	color: #244135;
}


@media (min-width: 1024px) {
	.djma-start-search__message,
	.djma-search-no-results__message {
		font-size: 17px;
		font-weight: 500;
	}

	.djma-start-search__icon,
	.djma-search-no-results__icon {
		font-size: 24px;
		margin-bottom: 8px;
	}
}

@media (max-width: 1023px) {
    .djma-search-layout {
		gap: 30px;
	}

	.djma-close-search__icon {
		font-size: 21px;
		border-radius: 25px;
	}

	.close-button.site-search-close {
		z-index: 10;
	}

	.djma-start-search__message, .djma-search-no-results__message {
		font-size: 14px;
		font-weight: 500;
	}

	.djma-start-search__icon, .djma-search-no-results__icon {
		font-size: 22px;
		margin-bottom: 8px;
	}

	.off-canvas-wrapper {
		height: 100%;
	}

	.djma-site-search {
		height: 100%;
	}

	#offCanvasTop1 .djma-search-form--offcanvas {
		display: none;
	}

	#offCanvasTop1.djma-site-search.is-visible .djma-search-form--offcanvas {
		display: block;
	}

	.off-canvas-wrapper .djma-site-search#offCanvasTop1.is-visible {
		/* Plein écran sous le header, indépendamment de under-header-nav */
		position: fixed;
		top: 149px;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100dvh + 50px - 149px);
		max-height: calc(100dvh - 149px);
		padding: 12px 16px 0px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		overscroll-behavior: contain;
		touch-action: auto;
	}

	/* Seule la zone résultats doit scroller */
	#offCanvasTop1.is-visible .djma-search-results {
		flex: 1 1 auto;
		min-height: 0; /* nécessaire pour que overflow fonctionne dans un flex parent */
		max-height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		touch-action: pan-y;
		padding-bottom: 130px;
		margin-right: -20px;
        margin-left: -20px;
	}

	.djma-search-column {
		margin: 0px 20px;
	}

	.djma-search-results__loading {
		padding: 100px 20px 32px 20px;
	}
}

.djma-search-type-filter-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.djma-search-type-filter {
	display: flex;
	width: fit-content;
	min-width: min-content;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
	border: 1px solid #E2E8F0;
}

.djma-navigation-tabs {
	margin-bottom: 40px;
}

.djma-search-type-filter__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 15px;
	border-radius: 8px;
	background: #FFFFFF;
	color: #244135;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.djma-search-type-filter__item.is-active {
	background: #00B761;
	border-color: #00B761;
	color: #FFFFFF;
}

.djma-search-type-results {
	flex: 1 1 auto;
	min-width: 0;
}

.djma-search-type-filter__item:focus-visible {
	outline: 2px solid rgba(0, 183, 97, 0.6);
	outline-offset: 2px;
}

/* Centrage horizontal du contenu de la top bar dans le template shopkeeper du plugin */
.djma-shopkeeper-archive .tob_bar_shop {
	display: flex;
	justify-content: center;
	align-items: center;
}

.djma-shopkeeper-archive .tob_bar_shop > .columns {
	float: none;
}

.djma-shopkeeper-archive .tob_bar_shop .text-left,
.djma-shopkeeper-archive .tob_bar_shop .text-right {
	text-align: center;
}

.djma-search-type-filter-layout + .djma-search-type-results {
	margin-top: 10px;
}

.djma-search-category {
	width: 100%;
}

.djma-search-category__title {
	font-size: 14px;
	font-weight: 600;
	max-height: 2.9em; /* ~2 lignes */
	overflow: hidden;
	display: -webkit-box;
	line-clamp: 2; /* Compat standard en plus de -webkit-line-clamp */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Titres de section */
.djma-search-section__title {
	margin: 0 0 12px;
	font-size: 16px !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
}

@media (max-width: 768px) {
	.djma-search-layout {
		grid-template-columns: 1fr;
	}

	.djma-search-type-filter-layout {
		flex-direction: column;
		gap: 16px;
	}

	.djma-search-type-filter {
		min-width: 0;
		flex-direction: row;
		flex-wrap: wrap;	
	}

	.djma-search-type-filter__item {
		font-size: 12px;
	}
}

.djma-start-search,
.djma-search-no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

@media (max-width: 1023px) {
	input[type="text"].custom-search-placeholder::placeholder {
		color: #475569;
		font-weight: 500;
		font-size: 13px;
	}

	.woocommerce-products-header__title.page-title.on-shop {
		font-size: 30px;
	}
}

@media (min-width: 1024px) {
	input[type="text"].custom-search-placeholder::placeholder {
		color: #475569;
		font-weight: 500;
		font-size: 15px;
	}
}

.djma-search-form__input.djma-search-form__input--offcanvas.custom-search-placeholder,
.offcanvas-search-bar .custom-search-placeholder {
	padding: 24px 40px 24px 16px;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	background: #F8FAFC;
	cursor: auto;
}

.offcanvas-search-bar {
	position: relative;
}

.djma-search-article__title {
	margin-bottom: 0px;
	font-weight: 600;
	text-align: left;
}

.offcanvas-search-bar .tools_button_icon {
	cursor: pointer;
}

.offcanvas-search-bar .tools_button_icon.is-disabled {
	pointer-events: none;
	cursor: pointer;
}

@media only screen and (min-width: 63.95em) {
	.djma-search-results {
		min-height: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	  
	.offcanvas-search-bar .tools_button_icon {
		position: absolute;
		top: 50%;
		right: 16px;
		transform: translateY(-50%);
	}
	  
	.offcanvas-search-bar .spk-icon-search {
		font-size: 20px;
	}
}

@media only screen and (max-width: 63.95em) {
	/* Trigger search du header (mobile) : force une zone cliquable stable */
	.offcanvas-search-bar.tools_button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		position: relative;
	}

	.offcanvas-search-bar.tools_button .search-form {
		display: none;
	}

	.offcanvas-search-bar.tools_button .tools_button_icon {
		pointer-events: none;
	}

	.offcanvas-search-bar .custom-search-placeholder {
		display: none;
	}

	.offcanvas-search-bar .custom-search-placeholder.mobile{
		padding: 20px 40px 20px 16px;
		display: block;
	}	

	.spk-icon-search.mobile {
		font-size: 17px !important;
	}

	.offcanvas-search-bar .tools_button_icon .mobile {
		position: absolute !important;
        top: 44%;
        right: 33px;
		transform: translateY(-50%);
	}

	.tools_button_icon.mobile {
		position: unset !important
	}

	.offcanvas-search-bar {
		cursor: pointer;
	}

	.offcanvas-search-bar .tools_button_icon {
		top: 50%;
		right: 5px;
		transform: translateY(-50%);
		pointer-events: none;
		position: absolute;
	}

	.offcanvas-search-bar .spk-icon-search {
		font-size: 22px;
	}
}

/* Responsive par largeur d'écran – remplace wp_is_mobile() côté serveur */
@media (max-width: 1023px) {
	.djma-search-bar--large-only {
		display: none;
	}

	.off-canvas-wrapper {
		/* Mobile: l'offcanvas doit pouvoir s'afficher quand JS ajoute .is-visible */
		display: block;
	}
}

@media (min-width: 1024px) {
	.offcanvas-search-bar.mobile {
		display: none;
	}
}