/**
 * Pretpot Pill with Carousel Hover Widget Styles (PRO)
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.pretpot-pill-carousel-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
}

/* Vertical: stack pills */
.pretpot-pill-carousel-wrapper.pretpot-pills-vertical {
    flex-direction: column;
    align-items: flex-start;
}

/* Inline: row layout */
.pretpot-pill-carousel-wrapper.pretpot-pills-inline {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Alignment */
.pretpot-pill-carousel-wrapper.pretpot-pills-inline.pretpot-align-left   { justify-content: flex-start; }
.pretpot-pill-carousel-wrapper.pretpot-pills-inline.pretpot-align-center  { justify-content: center; }
.pretpot-pill-carousel-wrapper.pretpot-pills-inline.pretpot-align-right   { justify-content: flex-end; }

/* ── Pill Container ──────────────────────────────────────────────────────── */
.pretpot-pill-container {
    position: relative;
    display: inline-flex;
}

/* ── Pill base ─────────────────────────────────────────────────────────── */
.pretpot-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    line-height: 1.4;
    flex-grow: 0;
    flex-shrink: 0;
    width: auto;
    position: relative;
    z-index: 1;
}

.pretpot-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pretpot-pill.pretpot-pill-link {
    position: relative;
}

/* ── Icon ───────────────────────────────────────────────────────────────── */
.pretpot-pill .pretpot-pill-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    color: inherit !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pretpot-pill .pretpot-pill-icon i,
.pretpot-pill .pretpot-pill-icon svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    fill: currentColor !important;
}

/* ── Popup/Carousel Container ───────────────────────────────────────────── */
.pretpot-pill-popup {
    position: absolute;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
}

/* Popup positioning - default right */
.pretpot-pill-container .pretpot-pill-popup {
    top: 50%;
    left: calc(100% + 10px);
    right: auto;
    transform: translateY(-50%);
}

/* Left position */
.pretpot-pill-container .pretpot-pill-popup[data-position="left"] {
    right: calc(100% + 10px);
    left: auto;
    transform: translateY(-50%);
}

/* Top position */
.pretpot-pill-container .pretpot-pill-popup[data-position="top"] {
    bottom: calc(100% + 10px);
    top: auto;
    left: 50%;
    transform: translateX(-50%);
}

/* Bottom position */
.pretpot-pill-container .pretpot-pill-popup[data-position="bottom"] {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

/* Show popup on hover - ALWAYS works regardless of animation mode */
.pretpot-pill-container:hover .pretpot-pill-popup,
.pretpot-pill-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Carousel Track ─────────────────────────────────────────────────────── */
.pretpot-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

/* ── Carousel Items ─────────────────────────────────────────────────────── */
.pretpot-carousel-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Force consistent sizing for both images and videos */
.pretpot-carousel-item img,
.pretpot-carousel-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

/* Hide video controls */
.pretpot-carousel-item video::-webkit-media-controls {
    display: none !important;
}

.pretpot-carousel-item video::-webkit-media-controls-enclosure {
    display: none !important;
}

.pretpot-carousel-item video::-webkit-media-controls-panel {
    display: none !important;
}

/* Firefox */
.pretpot-carousel-item video::-moz-media-controls {
    display: none !important;
}

/* ── Responsive Visible Items ──────────────────────────────────────────── */
/* Desktop - controlled by data attribute via JS */
@media (max-width: 1024px) {
    /* Tablet sizing handled by JS */
}

@media (max-width: 767px) {
    /* Mobile sizing handled by JS */
    .pretpot-pill-carousel-wrapper.pretpot-pills-inline {
        flex-wrap: wrap;
    }
    
    .pretpot-pill-container .pretpot-pill-popup {
        max-width: 90vw;
    }
}