/* ============================================================
   Kaya Podcast Playlist Widget — kpw-styles.css v1.2.5
   ============================================================ */

/* ── Reset / Base ─────────────────────────────────────────── */
.kpw-wrapper *,
.kpw-wrapper *::before,
.kpw-wrapper *::after {
    box-sizing: border-box;
}

.kpw-wrapper {
    font-family: inherit;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: visible;
    max-width: 100%;
}

/* ── Hero ─────────────────────────────────────────────────── */
.kpw-hero {
    border-bottom: 1px solid #e5e5e5;
}

.kpw-hero-link {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.kpw-hero-link:hover {
    background-color: #fafafa;
    text-decoration: none;
}

/* Featured image */
.kpw-hero-image {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 4px;
}

.kpw-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hero text area */
.kpw-hero-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kpw-hero-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    color: #111;
    word-break: break-word;
}

.kpw-hero-meta {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #888;
    text-transform: uppercase;
}

.kpw-hero-excerpt {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}

/* ── Hero play button ─────────────────────────────────────── */
.kpw-hero-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid #c0392b;
    border-radius: 50%;
    margin-top: 10px;
    flex-shrink: 0;
    align-self: flex-start;
    background-color: transparent;
    /* only border-color transitions on hover */
    transition: border-color 0.15s ease;
}

/* On hover: border goes black, NOTHING else changes */
.kpw-hero-link:hover .kpw-hero-play-btn {
    border-color: #111 !important;
    background-color: transparent !important;
}

/* Keep SVG circle stroke matching border */
.kpw-hero-play-btn svg {
    display: block;
}

.kpw-hero-play-btn svg circle {
    stroke: #c0392b;
    transition: stroke 0.15s ease;
}

.kpw-hero-link:hover .kpw-hero-play-btn svg circle {
    stroke: #111;
}

.kpw-hero-play-btn svg polygon {
    fill: #c0392b;
}

/* ── Playlist Header ──────────────────────────────────────── */
.kpw-playlist-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    overflow: visible;
    min-height: 44px;
}

.kpw-playlist-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #c0392b;
    text-transform: uppercase;
    flex: 1;
    transition: visibility 0s;
}

.kpw-playlist-label--text.kpw-label-hidden {
    visibility: hidden;
}

/* ── Search toggle icon ───────────────────────────────────── */
.kpw-search-wrap {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* span — not a button, so Elementor can't touch it */
.kpw-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 12;
    transition: background-color 0.15s;
}

.kpw-search-toggle svg {
    display: block;
    stroke: #bbb;
    transition: stroke 0.15s;
}

.kpw-search-toggle:hover svg {
    stroke: #c0392b;
}

/* ── Search input wrap ────────────────────────────────────── */
.kpw-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 100px;
    padding: 5px 8px 5px 12px;
    /* Collapsed / hidden state */
    max-width: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.25s ease, opacity 0.2s ease;
    z-index: 11;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Open state — JS adds .kpw-search-open */
.kpw-search-input-wrap.kpw-search-open {
    max-width: 260px;
    opacity: 1;
    pointer-events: all;
    overflow: visible;
}

.kpw-search-icon {
    flex-shrink: 0;
    color: #aaa;
    display: block;
}

.kpw-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent;
    font-size: 0.8rem;
    color: #111;
    font-family: inherit;
    min-width: 140px;
    box-shadow: none !important;
}

.kpw-search-input::placeholder { color: #bbb; }
.kpw-search-input::-webkit-search-cancel-button { display: none; }

/* ── Search clear (X) span ────────────────────────────────── */
.kpw-search-clear {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e0e0e0;
    cursor: pointer;
    transition: background-color 0.12s;
}

.kpw-search-clear.kpw-clear-visible {
    display: flex;
}

.kpw-search-clear:hover {
    background-color: #bbb;
}

/* ── No results message ───────────────────────────────────── */
.kpw-no-results {
    padding: 20px;
    text-align: center;
    font-size: 0.82rem;
    color: #999;
    border-bottom: 1px solid #e5e5e5;
    display: none;
}

/* ── List ─────────────────────────────────────────────────── */
.kpw-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kpw-list-item {
    border-bottom: 1px solid #e5e5e5;
}

.kpw-list-item:last-child {
    border-bottom: none;
}

.kpw-list-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.kpw-list-item-link:hover {
    background-color: #fafafa;
    text-decoration: none;
}

.kpw-list-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpw-list-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
    word-break: break-word;
    display: block;
}

.kpw-list-meta {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #888;
    text-transform: uppercase;
    display: block;
}

/* Active first item */
.kpw-list-item--active .kpw-list-title {
    color: #c0392b;
}

.kpw-list-item--active .kpw-list-meta {
    color: #c0392b;
}

/* Right side: duration + play icon */
.kpw-list-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.kpw-list-duration {
    font-size: 0.78rem;
    color: #888;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}

.kpw-list-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.15s ease;
}

.kpw-list-play-btn svg {
    fill: #bbb;
    transition: fill 0.15s;
    display: block;
}

.kpw-list-item-link:hover .kpw-list-play-btn {
    background-color: #f0f0f0;
}

.kpw-list-item-link:hover .kpw-list-play-btn svg {
    fill: #c0392b;
}

.kpw-list-item--active .kpw-list-play-btn svg {
    fill: #c0392b;
}

/* ── Load More ────────────────────────────────────────────── */
.kpw-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 16px 20px;
    border-top: 1px solid #e5e5e5;
}

.kpw-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 24px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #c0392b;
    background: transparent;
    border: 1.5px solid #c0392b;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
}

.kpw-load-more-btn:hover:not(:disabled) {
    background-color: #c0392b;
    color: #fff;
}

.kpw-load-more-btn:disabled,
.kpw-load-more-btn.kpw-loading {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .kpw-hero-image {
        width: 90px;
        height: 90px;
    }
    .kpw-hero-title {
        font-size: 0.95rem;
    }
    .kpw-hero-play-btn {
        width: 42px;
        height: 42px;
    }
    .kpw-search-input-wrap.kpw-search-open {
        max-width: 180px;
    }
    .kpw-search-input {
        min-width: 100px;
    }
}