/* ==========================================
   LPTL FRONTEND STYLE
   Version: 9.6 - No Border Radius for Small Icons
   
   CHANGELOG v9.6:
   - ✅ Default border-radius: 0 (kotak) untuk icon kecil
   - ✅ Icon besar (>60px) tetap 8px rounded
   - ✅ Gunakan CSS variable --icon-radius dari inline style
   - ✅ Ads mode tetap 8px rounded
   - ✅ Stacked layout tetap 12px
   - ✅ Tambah override untuk memastikan icon kecil kotak
   ========================================== */


/* ==========================================
   ICON BASE STYLE
   ========================================== */

.lptl-np-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: var(--icon-color, #8b5cf6);
    /* ✅ v9.6: Default 0 (kotak) — akan di-override oleh inline style
       berdasarkan ukuran: ≤60px = 0, >60px = 8px */
    border-radius: var(--icon-radius, 0);
    transition: border-radius 0.2s ease, box-shadow 0.2s ease;
    vertical-align: middle;
}

/* Icon dalam stacked layout selalu rounded */
.lptl-np-icon.lptl-np-icon-auto-height {
    /* Icon dengan auto-height biasanya besar, biarkan inline style handle */
}

/* Fallback jika inline style hilang: icon kecil tetap kotak */
.lptl-np-icon[data-icon-width="48"] {
    border-radius: 0;
}

.lptl-np-icon[data-icon-width="64"],
.lptl-np-icon[data-icon-width="96"],
.lptl-np-icon[data-icon-width="100"],
.lptl-np-icon[data-icon-width="128"] {
    /* Icon kecil-menengah: tetap kotak (≤128px) */
    border-radius: 0;
}

/* Icon besar: rounded */
.lptl-np-icon[data-icon-width="200"],
.lptl-np-icon[data-icon-width="256"],
.lptl-np-icon[data-icon-width="300"],
.lptl-np-icon[data-icon-width="400"],
.lptl-np-icon[data-icon-width="500"],
.lptl-np-icon[data-icon-width="512"],
.lptl-np-icon[data-icon-width="600"] {
    border-radius: 8px;
}

/* ==========================================
   ICON INNER ELEMENTS
   ========================================== */

.lptl-np-icon-file,
.lptl-np-icon-lottie,
.lptl-np-icon-emoji {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
}

.lptl-np-icon-file {
    object-fit: cover;
    object-position: center;
}

.lptl-np-icon-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    user-select: none;
}

/* Wave animation (visual equalizer) */
.lptl-np-icon-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    animation: lptl-wave 1.5s linear infinite;
    pointer-events: none;
}

@keyframes lptl-wave {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==========================================
   ICON ADS MODE (Banner / Iklan)
   ========================================== */

.lptl-np-icon.lptl-np-icon-ads {
    border-radius: 8px !important;    /* Ads selalu rounded */
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    padding: 0 !important;
}

.lptl-np-icon.lptl-np-icon-ads.lptl-np-icon-ads-square {
    border-radius: 2px !important;
}

/* Image di dalam Ads */
.lptl-np-icon.lptl-np-icon-ads .lptl-np-icon-file {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: inherit !important;
    display: block !important;
}

/* Emoji di dalam Ads (fallback) */
.lptl-np-icon.lptl-np-icon-ads .lptl-np-icon-emoji {
    font-size: 32px !important;
}

/* Lottie di dalam Ads */
.lptl-np-icon.lptl-np-icon-ads .lptl-np-icon-lottie {
    width: 100% !important;
    height: 100% !important;
}

/* Sembunyikan wave di Ads */
.lptl-np-icon.lptl-np-icon-ads .lptl-np-icon-wave {
    display: none !important;
}


/* ==========================================
   LAYOUT ADS DI WIDGET NOWPLAYING
   ========================================== */

/* Layout default: ikon di kiri, teks di kanan */
.lptl-nowplaying-widget .lptl-np-icon.lptl-np-icon-ads + .lptl-np-track-wrapper {
    padding-left: 4px;
}

/* Layout card: ads lebih lebar */
.lptl-nowplaying-widget.lptl-np-layout-card .lptl-np-icon.lptl-np-icon-ads {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Alignment center: ads di atas teks */
.lptl-nowplaying-widget.lptl-np-align-center .lptl-np-icon.lptl-np-icon-ads {
    margin: 0 auto 8px auto;
}


/* ==========================================
   CLICKABLE IMAGE
   ========================================== */

.lptl-np-icon-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: zoom-in;
    transition: transform 0.2s ease, filter 0.2s ease;
    border-radius: inherit;
    overflow: hidden;
}

.lptl-np-icon-link:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}

.lptl-np-icon-link:active {
    transform: scale(0.98);
}

.lptl-np-icon-link:focus {
    outline: 3px solid var(--icon-color, #8b5cf6);
    outline-offset: 2px;
}


/* ==========================================
   STACKED LAYOUT (icon ≥ 500px)
   ========================================== */

.lptl-nowplaying-widget.lptl-np-layout-stacked {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 15px;
    padding: 20px;
}

.lptl-nowplaying-widget.lptl-np-layout-stacked .lptl-np-icon {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: auto;
    margin: 0 auto;
    /* ✅ Stacked layout tetap rounded 12px */
    border-radius: 12px !important;
}

.lptl-nowplaying-widget.lptl-np-layout-stacked .lptl-np-icon-type-image {
    background: transparent;
    box-shadow: none;
    border-radius: 12px;
    overflow: hidden;
}

.lptl-nowplaying-widget.lptl-np-layout-stacked .lptl-np-icon-file {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: inherit;
    display: block;
}

.lptl-nowplaying-widget.lptl-np-layout-stacked .lptl-np-track-wrapper {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lptl-nowplaying-widget.lptl-np-layout-stacked .lptl-np-line1 {
    font-size: 20px;
    font-weight: 700;
}


/* ==========================================
   WIDE LAYOUT (icon 300-499px)
   ========================================== */

.lptl-nowplaying-widget.lptl-np-layout-wide {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
}

.lptl-nowplaying-widget.lptl-np-layout-wide .lptl-np-icon {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    margin: 0;
}


/* ==========================================
   ✅ v9.6 FIX: ICON KECIL TANPA RADIUS
   
   Override untuk memastikan icon kecil (< 60px) selalu kotak,
   meskipun ada aturan CSS lain yang mencoba membuatnya bulat.
   ========================================== */

/* Semua icon dengan width attribute ≤ 60px → kotak */
.lptl-np-icon:not(.lptl-np-icon-ads):not([data-icon-width]) {
    /* default jika tidak ada data-icon-width */
    border-radius: 0;
}

/* Specific: 48px (paling umum untuk icon kecil) */
.lptl-np-icon[data-icon-width="16"],
.lptl-np-icon[data-icon-width="24"],
.lptl-np-icon[data-icon-width="32"],
.lptl-np-icon[data-icon-width="40"],
.lptl-np-icon[data-icon-width="48"],
.lptl-np-icon[data-icon-width="50"],
.lptl-np-icon[data-icon-width="60"] {
    border-radius: 0 !important;
}

/* Khusus emoji kecil — pastikan kotak */
.lptl-np-icon[data-icon-width="48"].lptl-np-icon-type-emoji,
.lptl-np-icon[data-icon-width="50"].lptl-np-icon-type-emoji,
.lptl-np-icon[data-icon-width="60"].lptl-np-icon-type-emoji {
    border-radius: 0 !important;
}

/* Icon dengan attribute data-ads="1" selalu rounded (override di atas) */
.lptl-np-icon[data-ads="1"] {
    border-radius: 8px !important;
}

/* Icon dengan width > 60px — rounded */
.lptl-np-icon[data-icon-width="64"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="80"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="96"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="100"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="120"]:not([data-ads="1"]) {
    border-radius: 4px !important;
}

.lptl-np-icon[data-icon-width="128"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="150"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="160"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="180"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="200"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="256"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="300"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="400"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="500"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="512"]:not([data-ads="1"]),
.lptl-np-icon[data-icon-width="600"]:not([data-ads="1"]) {
    border-radius: 8px !important;
}


/* ==========================================
   RESPONSIVE MOBILE — Auto Stacked
   ========================================== */

@media (max-width: 767px) {
    .lptl-nowplaying-widget.lptl-np-has-ads,
    .lptl-nowplaying-widget.lptl-np-layout-stacked,
    .lptl-nowplaying-widget.lptl-np-layout-wide {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }
    
    .lptl-nowplaying-widget.lptl-np-layout-stacked .lptl-np-icon,
    .lptl-nowplaying-widget.lptl-np-layout-wide .lptl-np-icon {
        width: 100% !important;
        height: auto !important;
    }
}