/**
 * Custom Categories Widget - Frontend Styles
 * Handles layouts (vertical, inline, pills, grid) and overflow (wrap, scroll, show more)
 */

.ccw-wrapper {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.ccw-categories-list {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ccw-categories-list > li {
    box-sizing: border-box;
}

/* ============ LAYOUT: VERTICAL (default) ============ */
.ccw-layout-vertical {
    /* Keep native list behavior so list-style-type bullets render */
}

/* ============ LAYOUT: INLINE HORIZONTAL ============ */
.ccw-layout-inline {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
}

.ccw-layout-inline > li {
    display: inline-flex;
    align-items: center;
}

/* Separator between inline items - uses CSS variable injected from PHP */
.ccw-layout-inline > li:not(:last-child)::after {
    content: var(--ccw-separator, "|");
    margin-left: 0.75em;
    opacity: 0.5;
    pointer-events: none;
}

/* ============ LAYOUT: PILLS ============ */
.ccw-layout-pills {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.ccw-layout-pills > li {
    background: #f3f4f6;
    padding: 6px 14px;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    line-height: 1.4;
}

.ccw-layout-pills > li a {
    text-decoration: none;
    color: inherit;
}

.ccw-layout-pills > li:hover {
    transform: translateY(-1px);
}

/* ============ LAYOUT: GRID ============ */
.ccw-layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
}

/* ============ OVERFLOW: HORIZONTAL SCROLL ============ */
.ccw-overflow-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.ccw-overflow-scroll > li {
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* When scroll is used on grid, flatten to single row */
.ccw-layout-grid.ccw-overflow-scroll {
    display: flex;
    grid-template-columns: none;
}

/* Remove inline separator when scrolling so it doesn't break wrap */
.ccw-layout-inline.ccw-overflow-scroll > li:not(:last-child)::after {
    margin-left: 0.75em;
}

/* Hide scrollbar option */
.ccw-hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ccw-hide-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Fade edges for scroll, purely visual cue */
.ccw-overflow-scroll.ccw-scroll-fade {
    -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
}

/* ============ OVERFLOW: SHOW MORE / LESS ============ */
.ccw-categories-list .ccw-hidden {
    display: none !important;
}

.ccw-toggle-wrapper {
    display: flex;
    margin-top: 12px;
}

.ccw-toggle-btn {
    display: inline-block;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: opacity 0.2s ease, transform 0.15s ease;
    line-height: 1.2;
}

.ccw-toggle-btn:hover {
    opacity: 0.75;
}

.ccw-toggle-btn:active {
    transform: scale(0.98);
}

/* Hide button when not needed (set by JS) */
.ccw-toggle-btn[hidden] {
    display: none !important;
}

/* ============ EMPTY STATE ============ */
.ccw-no-categories {
    margin: 0;
    opacity: 0.7;
    font-style: italic;
}