/**
 * Elementor Widget Styles
 *
 * @package BwaTimeline
 */

/* Conteneur du widget */
.bwa-timeline-elementor-widget {
	width: 100%;
}

/* Réinitialiser les marges/paddings d'Elementor */
.elementor-widget-bwa_timeline .elementor-widget-container {
	margin: 0;
	padding: 0;
}

/* Aperçu dans l'éditeur Elementor */
.elementor-widget-preview {
	padding: 20px;
	background: #f0f0f0;
	border-radius: 8px;
	text-align: center;
}

.elementor-widget-preview small {
	display: block;
	margin-top: 10px;
	color: #666;
}

/* Assurer que la timeline prend toute la largeur dans Elementor */
.elementor-widget-bwa_timeline .bwatimeline {
	max-width: 100%;
	width: 100%;
}

/* Forcer la largeur maximale du slider à 100% dans Elementor */
.elementor-widget-bwa_timeline .bwatimeline-horizontal__slider {
	max-width: 100%;
}

/* Ajuster les paddings de la timeline horizontale dans Elementor */
.elementor-widget-bwa_timeline .bwatimeline-horizontal.bwatimeline-full {
	padding-left: 0;
	padding-right: 0;
}

/* Corrections spécifiques pour l'éditeur Elementor */
.elementor-editor-active .bwatimeline-gallery-btn {
	pointer-events: none;
	opacity: 0.7;
}

/* Assurer que le swiper prend toute la largeur */
.elementor-widget-bwa_timeline .bwatimeline-swiper {
	width: 100%;
}

/* Assurer que le wrapper prend toute la largeur */
.elementor-widget-bwa_timeline .swiper-wrapper {
	width: 100%;
}

/* ===================================
   MODAL STYLES FROM ELEMENTOR
   =================================== */

/* Appliquer les styles Elementor à la modal via variables CSS */
body[data-bwa-elementor-id] .bwatimeline-gallery-modal .bwatimeline-modal-content {
	background-color: var(--bwa-modal-bg-color, #fff);
	border-radius: var(--bwa-modal-border-radius, 16px);
	min-height: var(--bwa-modal-min-height, auto);
	max-height: var(--bwa-modal-max-height, 90vh);
}

/* Styles de titre de la modal */
body[data-bwa-elementor-id] .bwatimeline-gallery-modal .bwatimeline-modal-title {
	color: var(--bwa-modal-title-color, inherit);
}

/* Styles de description de la modal */
body[data-bwa-elementor-id] .bwatimeline-gallery-modal .bwatimeline-modal-description {
	color: var(--bwa-modal-description-color, inherit);
}

/* Flèches de navigation */
body[data-bwa-elementor-id] .bwatimeline-gallery-modal .bwatimeline-slider-prev svg,
body[data-bwa-elementor-id] .bwatimeline-gallery-modal .bwatimeline-slider-next svg {
	fill: var(--bwa-modal-arrow-color, currentColor);
}

body[data-bwa-elementor-id] .bwatimeline-gallery-modal .bwatimeline-slider-prev:hover svg,
body[data-bwa-elementor-id] .bwatimeline-gallery-modal .bwatimeline-slider-next:hover svg {
	fill: var(--bwa-modal-arrow-hover-color, currentColor);
}

/* Miniatures */
body[data-bwa-elementor-id] .bwatimeline-gallery-modal .bwatimeline-slider-thumbs .swiper-slide-thumb-active img {
	border-color: var(--bwa-modal-thumb-border-color, #fff);
}

body[data-bwa-elementor-id] .bwatimeline-gallery-modal .bwatimeline-slider-thumbs .swiper-slide:not(.swiper-slide-thumb-active) img {
	opacity: var(--bwa-modal-thumb-opacity, 0.4);
}