/* Styles for front-end slider and contacts */
/* Slider container: uses CSS aspect-ratio to maintain image proportions.
   Height falls back to --pfb-slider-height if defined, otherwise uses aspect ratio. */
.pfb-slider {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: var(--pfb-aspect-ratio, 16/9);
    overflow: hidden;
}

/* Ensure the internal Swiper wrapper does not alter positioning: arrows and dots align relative to the slider container */
.pfb-slider .swiper {
    position: static;
    height: 100%;
}
.pfb-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.pfb-slider.pfb-full-width {
    width: 100%;
}
/* Navigation arrows styling: color controlled via CSS variable */
.pfb-slider .swiper-button-prev,
.pfb-slider .swiper-button-next {
    color: var(--pfb-arrow-color, #ffffff);
    top: 50%;
    transform: translateY(-50%);
    /* Allow the size of arrows to be customized via CSS variable */
    --swiper-navigation-size: var(--pfb-arrow-size, 44px);
}
/* Dots styling: background color controlled via CSS variable */
.pfb-slider .swiper-pagination-bullet {
    background-color: var(--pfb-dot-color, #ffffff);
    opacity: 0.6;
    width: var(--pfb-dot-size, 8px);
    height: var(--pfb-dot-size, 8px);
}
.pfb-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}
.pfb-contacts {
    display: flex;
    flex-wrap: wrap;
}
.pfb-contact-item .pfb-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.pfb-contact-item .pfb-btn svg {
    width: 20px;
    height: 20px;
    /* The icon colour is controlled via CSS variables on the parent element. */
    fill: var(--pfb-icon-color, currentColor);
}

/* On hover, change the icon colour if a hover variable is provided */
.pfb-contact-item .pfb-btn:hover svg {
    fill: var(--pfb-icon-color-hover, var(--pfb-icon-color, currentColor));
}

/* Full width on label when enabled */
.pfb-label.pfb-fullwidth{ display:block; width:100%; }


/* --- Full-width stacked layout when enabled --- */
.pfb-contacts.pfb-contacts--full{ width:100%; text-align:left; }
.pfb-contacts.pfb-contacts--full .pfb-contact-item{ display:block; width:100%; }
.pfb-contacts.pfb-contacts--full .pfb-contact-item + .pfb-contact-item{ margin-top:12px; } /* spacing between buttons */
.pfb-contacts.pfb-contacts--full .pfb-contact-item .pfb-btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  box-sizing:border-box;
}