/**
 * Pretpot Simple Pill Text Widget Styles
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.pretpot-pill-text-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* pills keep their own height; no stretching */
}

/* Vertical: stack pills, each stays at its natural (content) width */
.pretpot-pill-text-wrapper.pretpot-pills-vertical {
    flex-direction: column;
    align-items: flex-start; /* ← prevents pills from stretching to full width */
}

/* Inline: row layout, pills wrap to the next line when out of space */
.pretpot-pill-text-wrapper.pretpot-pills-inline {
    flex-direction: row;
    flex-wrap: wrap;          /* pills wrap, they do NOT stretch */
}

/* ── Alignment (inline mode only) ───────────────────────────────────────── */
.pretpot-pill-text-wrapper.pretpot-pills-inline.pretpot-align-left   { justify-content: flex-start; }
.pretpot-pill-text-wrapper.pretpot-pills-inline.pretpot-align-center  { justify-content: center;     }
.pretpot-pill-text-wrapper.pretpot-pills-inline.pretpot-align-right   { justify-content: flex-end;   }

/* ── 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;
    /* Pill never grows beyond its content width in either layout */
    flex-grow:   0;
    flex-shrink: 0;
    width:       auto;   /* respect content, not container */
}

.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 ────────────────────────────────────────────────────────────────── */
/*
 * All icon rules use !important so theme stylesheets cannot hide the icon.
 * Sizing is also controlled via Elementor's dynamic selectors in the PHP,
 * which likewise carry !important.
 */
.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;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .pretpot-pill-text-wrapper.pretpot-pills-inline {
        flex-wrap: wrap;
    }
}