/* ======================================================
   YukDigitalz Product Suite - FINAL STYLE (SVG ARROWS)
   ====================================================== */

/* 1. RESET & WRAPPERS */
.ydpg-grid-wrapper, 
.ydpg-carousel-wrapper {
    position: relative;
    width: 100%; max-width: 100%; min-width: 0; /* Fix Flexbox Collapse */
    margin: 0 auto 30px; padding: 0; box-sizing: border-box;
}
.ydpg-grid-wrapper *, .ydpg-carousel-wrapper * { box-sizing: border-box; }

/* 2. GRID LAYOUT */
.yd-product-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px; width: 100%;
}

/* 3. CAROUSEL LAYOUT (Flexbox Equal Height Fix) */
.yd-swiper-container {
    width: 100%; position: relative; overflow: hidden;
    padding: 15px 5px 50px 5px; /* Padding bawah untuk dots */
    margin: -15px -5px; /* Kompensasi margin */
}
.yd-swiper-wrapper {
    display: flex !important; align-items: stretch !important; /* PENTING: Tinggi rata */
    width: 100%; height: 100%; box-sizing: content-box;
}
.swiper-slide {
    display: flex !important; height: auto !important; /* Ikuti tinggi konten */
    flex-shrink: 0 !important; justify-content: center;
}
/* Kartu di dalam slider */
.swiper-slide .yd-product-card {
    width: 100% !important; height: 100% !important; /* Penuhi slide */
    display: flex !important; flex-direction: column !important; margin: 0;
}

/* 4. PRODUCT CARD STYLE */
.yd-product-card {
    background: #fff; border: 1px solid #eee; border-radius: 12px;
    overflow: hidden; position: relative; display: flex; flex-direction: column;
    transition: all 0.3s ease; height: 100%;
}
.yd-product-card:hover {
    transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/* Image Area */
.yd-img-wrapper {
    position: relative; width: 100%; padding-top: 100%; /* Rasio 1:1 */
    overflow: hidden; background: #f9f9f9; flex-shrink: 0;
}
.yd-img-wrapper img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.3s ease;
}
/* Badge */
.yd-badge-sale {
    position: absolute; top: 10px; left: 10px;
    background: #e74c3c; color: #fff; font-size: 11px; font-weight: 700;
    padding: 4px 8px; border-radius: 4px; z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* Content Area */
.yd-product-info {
    padding: 15px; flex-grow: 1; /* Isi sisa ruang */
    display: flex; flex-direction: column; justify-content: space-between;
}
.yd-product-info h4 {
    margin: 0 0 10px; font-size: 16px; line-height: 1.4; font-weight: 600; color: #333;
}
.yd-product-info .price {
    color: #e67e22; font-weight: 700; font-size: 15px;
    display: flex; gap: 8px; align-items: center; margin-top: auto;
}
.yd-product-info .price del { color: #aaa; font-weight: 400; text-decoration: line-through; font-size: 0.9em; }
.yd-product-info .price ins { text-decoration: none; }

/* Hover Overlay Buttons */
.yd-card-hover {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;
    gap: 10px; opacity: 0; transition: opacity 0.3s; z-index: 4;
}
.yd-product-card:hover .yd-card-hover { opacity: 1; }
.yd-card-hover button {
    border: none; background: #fff; color: #111;
    padding: 10px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: 0.2s;
}
.yd-card-hover button:hover { background: #111; color: #fff; }
.yd-btn-disabled { opacity: 0.7; cursor: not-allowed; pointer-events: none; background: #ddd !important; }

/* 5. NAVIGASI CAROUSEL (SVG ICONS FIX) */
.yd-swiper-button {
    width: 44px; height: 44px;
    /* Warna default jika tidak diatur di Elementor */
    background-color: #222; color: #fff; 
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 20; cursor: pointer; transition: all 0.3s ease;
    opacity: 0; /* Sembunyi dulu */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Tampilkan panah saat container di-hover */
.yd-swiper-container:hover .yd-swiper-button {
    opacity: 1;
}
/* Hover Effect pada tombol panah */
.yd-swiper-button:hover {
    background-color: #e67e22; /* Warna aksen default */
    transform: translateY(-50%) scale(1.1);
}
.yd-swiper-button.swiper-button-disabled {
    opacity: 0.3; cursor: default; pointer-events: none;
}

/* Menggunakan SVG Inline untuk Panah yang Tajam */
.yd-swiper-button::after {
    content: ''; display: block; width: 40%; height: 40%;
    background-repeat: no-repeat; background-position: center; background-size: contain;
}

/* Panah Kiri (Previous) - SVG Chevron Left */
.swiper-button-prev.yd-swiper-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Panah Kanan (Next) - SVG Chevron Right */
.swiper-button-next.yd-swiper-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Posisi Panah */
.swiper-button-next { right: 10px; }
.swiper-button-prev { left: 10px; }

/* Pagination Dots */
.swiper-pagination {
    position: absolute; bottom: 10px !important; width: 100%; text-align: center; z-index: 10;
}
.swiper-pagination-bullet { 
    width: 8px; height: 8px; background: #ccc; opacity: 0.6;
    display: inline-block; border-radius: 50%; margin: 0 5px !important;
    transition: all 0.3s;
}
.swiper-pagination-bullet-active { 
    background: #111; width: 24px; border-radius: 4px; opacity: 1;
}

/* 6. FILTER, LOADING, MODAL (TETAP SAMA) */
.yd-category-filter {
    display: flex; gap: 10px; justify-content: center; margin-bottom: 25px; flex-wrap: wrap;
}
.yd-filter-btn {
    border: 1px solid #ddd; background: #fff; padding: 8px 16px; border-radius: 20px; 
    font-size: 14px; color: #555; cursor: pointer; transition: all 0.2s;
}
.yd-filter-btn:hover { background: #f5f5f5; border-color: #ccc; }
.yd-filter-btn.active { background: #111; color: #fff; border-color: #111; }
.yd-load-more-wrapper { text-align: center; margin-top: 30px; }
.yd-load-more {
    display: inline-block; padding: 10px 25px; border-radius: 30px; 
    background: #111; color: #fff; border: none; cursor: pointer; transition: 0.2s;
}
.yd-load-more:hover { background: #e67e22; }
.yd-grid-loading, .yd-carousel-loading { text-align: center; padding: 40px; color: #888; font-style: italic; }
.yd-loading-data { text-align: center; color: #777; padding: 20px; font-style: italic; }
.yd-skeleton-card {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    height: 300px; border-radius: 12px; background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
.yd-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.yd-modal.active { opacity: 1; pointer-events: auto; }
.yd-modal-content {
    background: #fff; width: 100%; max-width: 800px; max-height: 90vh;
    overflow-y: auto; border-radius: 10px; position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); display: flex; flex-direction: column;
}
.yd-modal-close {
    position: absolute; top: 15px; right: 15px; border: none; background: #f0f0f0;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 20px;
    display: flex; align-items: center; justify-content: center; z-index: 10;
    transition: 0.2s;
}
.yd-modal-close:hover { background: #e74c3c; color: #fff; }
.yd-modal-body { display: flex; flex-wrap: wrap; }
.yd-modal-img { flex: 1 1 300px; background: #f9f9f9; padding: 30px; display: flex; align-items: center; justify-content: center; }
.yd-modal-img img { max-width: 100%; max-height: 400px; object-fit: contain; }
.yd-modal-info { flex: 1 1 300px; padding: 30px; text-align: left; }
.yd-modal-info h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.5rem; }
.yd-modal-info .price { font-size: 1.2rem; color: #e67e22; font-weight: bold; margin-bottom: 15px; }
.yd-modal-info .description { 
    font-size: 0.95rem; line-height: 1.6; color: #555; 
    margin-bottom: 20px; max-height: 150px; overflow-y: auto; 
}
.yd-var-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
.ydpg-var-btn {
    border: 1px solid #ddd; padding: 10px; text-align: center; text-decoration: none;
    color: #333; display: flex; flex-direction: column; border-radius: 6px; transition: 0.2s;
}
.ydpg-var-btn:hover { border-color: #111; background: #f9f9f9; }
.ydpg-var-btn span { font-weight: 600; font-size: 0.9rem; }
.ydpg-var-btn small { color: #e67e22; font-size: 0.85rem; margin-top: 4px; font-weight: 700; }
.ydpg-buy-btn {
    display: block; width: 100%; background: #111; color: #fff; text-align: center;
    padding: 12px; margin-top: 10px; text-decoration: none; border-radius: 6px; font-weight: bold;
}
.ydpg-buy-btn:hover { background: #333; color: #fff; }
@media (max-width: 600px) {
    .yd-modal-img { padding: 10px; height: 200px; }
    .yd-modal-info { padding: 20px; }
    .yd-var-grid { grid-template-columns: 1fr; }
}