@extends('layouts.app')
@section('content')

@php
    $defaultPrice = $product->final_price ?? 0;
    $defaultMrp   = $product->productMrp ?? $product->old_price ?? 0;

    if(($product->has_price_variant ?? 'no') == 'yes' && isset($product->priceVariants) && $product->priceVariants->count() > 0){
        $defaultVariant = $product->priceVariants->sortBy('final_price')->first();

        if($defaultVariant){
            $defaultPrice = $defaultVariant->final_price ?? 0;
            $defaultMrp   = $defaultVariant->size_mrp ?? 0;
        }
    }

    $defaultDiscountPercent = 0;
    if($defaultMrp > 0 && $defaultPrice > 0 && $defaultMrp > $defaultPrice){
        $defaultDiscountPercent = round((($defaultMrp - $defaultPrice) / $defaultMrp) * 100);
    }

    $inCart = in_array($product->id, $cartProductIds ?? []);
@endphp


<section class="product-detail-section">
    <div class="container">

        <div class="breadcrumb-wrap">
            <a href="{{ url('/') }}">Home</a> /
            <a href="{{ route('product') }}">Products</a> /
            <span class="text-dark">{{ $product->productName }}</span>
        </div>

        <div class="product-main-card">
            <div class="row align-items-start">

                <div class="col-lg-6 mb-4">
                    <div class="gallery-card">
                        <div class="main-product-image">
                            <div class="product-badge-group">
                                @if(($product->stock ?? '') == 'Out of Stock')
                                    <span class="product-badge badge-out">Out of Stock</span>
                                @elseif(($product->stock ?? '') == 'Low Stock')
                                    <span class="product-badge badge-low">Low Stock</span>
                                @else
                                    <span class="product-badge badge-stock">Available</span>
                                @endif

                                @if($defaultDiscountPercent > 0)
                                    <span class="product-badge badge-sale" id="badgeDiscount">{{ $defaultDiscountPercent }}% Off</span>
                                @endif
                            </div>

                            <img id="mainProductImage"
                                 src="{{ asset($product->thumbImage ?? $product->image_url) }}" data-zoom-image="{{ asset($product->thumbImage ?? $product->image_url) }}"
                                 alt="{{ $product->productName }}">
                        </div>

                        <div class="thumb-list">

                            @php
                                $images = [];
                        
                                if(!empty($product->thumbImage)){
                                    $images[] = asset($product->thumbImage);
                                }
                        
                                if(isset($product->galleryImages)){
                                    foreach($product->galleryImages as $img){
                                        $images[] = asset($img->image);
                                    }
                                }
                        
                                if(isset($product->colorVariants)){
                                    foreach($product->colorVariants as $color){
                                        if(!empty($color->color_image_url)){
                                            $images[] = asset($color->color_image_url);
                                        }
                                    }
                                }
                        
                                $images = array_unique($images);
                            @endphp
                        
                            @foreach($images as $key=>$image)
                        
                                <div class="thumb-item {{ $key==0 ? 'active' : '' }}"
                                     onclick="changeProductImage(this,'{{ $image }}')">
                        
                                    <img src="{{ $image }}">
                        
                                </div>
                        
                            @endforeach
                            
                            @php
                                $videoId = '';
                            
                                if (!empty($product->youtube_link)) {
                                    preg_match(
                                        '/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/',
                                        $product->youtube_link,
                                        $matches
                                    );
                            
                                    $videoId = $matches[1] ?? '';
                                }
                            @endphp
                            
                            @if(!empty($product->youtube_link))

                                <div class="thumb-item youtube-thumb"
                                     onclick="window.open('{{ $product->youtube_link }}', '_blank')">
                            
                                    <img src="https://img.youtube.com/vi/{{ $videoId }}/hqdefault.jpg">
                            
                                    <span class="play-icon">
                                        <i class="fas fa-play"></i>
                                    </span>
                            
                                </div>
                            
                            @endif
                        
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 mb-4">
                    <div class="info-card">

                        <div class="product-category">
                            <i class="fas fa-layer-group"></i>
                            {{ $product->category->categoryName ?? 'Printing Product' }}
                        </div>

                        <h1 class="product-title">{{ $product->productName }}</h1>

                        <p class="short-description">
                            {{ Str::limit(strip_tags($product->productDescription), 220) ?: 'Premium quality custom printing product with professional finish and fast delivery.' }}
                        </p>

                        <div class="price-box">
                            <span class="current-price" id="mainPrice">
                                ₹{{ number_format($defaultPrice, 2) }}
                            </span>

                            <span class="old-price" id="mainOldPrice" style="{{ $defaultMrp > $defaultPrice ? '' : 'display:none;' }}">
                                ₹{{ number_format($defaultMrp, 2) }}
                            </span>

                            <span class="save-price" id="mainDiscountPercent" style="{{ $defaultDiscountPercent > 0 ? '' : 'display:none;' }}">
                                {{ $defaultDiscountPercent }}% Off
                            </span>
                        </div>
                        @if(!empty($product->flat_discount) && $product->flat_discount > 0)
                            <div class="prepaid-discount-box">
                                <i class="fas fa-bolt"></i>
                                <span>
                                    <strong>Prepaid Offer:</strong>
                                    If you place a prepaid order, you'll get an
                                    <strong>instant ₹{{ number_format($product->flat_discount, 0) }}</strong>
                                    discount.
                                </span>
                            </div>
                        @endif
                        @if(($product->has_price_variant ?? 'no') == 'yes' && isset($product->priceVariants) && $product->priceVariants->count() > 0)
                            <div class="option-box">
                                <label class="option-title">
                                    <i class="fas fa-ruler-combined"></i> Choose Size / Variant
                                </label>

                                <div class="variant-list">
                                    @foreach($product->priceVariants as $index => $variant)
                                        <label class="variant-item">
                                            <input type="radio"
                                                   name="price_variant"
                                                   value="{{ $variant->id }}"
                                                   data-price="{{ $variant->final_price ?? 0 }}"
                                                   data-mrp="{{ $variant->size_mrp ?? 0 }}"
                                                   {{ $index == 0 ? 'checked' : '' }}>

                                            <div class="variant-content">
                                                <div>
                                                    <strong>{{ $variant->size_name ?? 'Variant' }}</strong>
                                                    <small class="d-block text-muted">Premium print option</small>
                                                </div>

                                                <div class="variant-price">
                                                    ₹{{ number_format($variant->final_price ?? 0, 2) }}

                                                    @if(($variant->size_mrp ?? 0) > ($variant->final_price ?? 0))
                                                        <small style="color:#94a3b8;text-decoration:line-through;margin-left:6px;">
                                                            ₹{{ number_format($variant->size_mrp, 2) }}
                                                        </small>
                                                    @endif
                                                </div>
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if(($product->has_color_variant ?? 'no') == 'yes' && isset($product->colorVariants) && $product->colorVariants->count() > 0)
                            <div class="option-box">
                                <label class="option-title">
                                    <i class="fas fa-palette"></i> Choose Color
                                </label>

                                <div class="color-variant-list">
                                    @foreach($product->colorVariants as $index => $color)
                                        <label class="color-variant-item">
                                            <input type="radio"
                                                   name="color_variant"
                                                   value="{{ $color->id }}"
                                                   data-color-image="{{ $color->color_image_url }}"
                                                   {{ $index == 0 ? 'checked' : '' }}>

                                            <span class="color-circle" style="background: {{ $color->color_code ?? '#2f5ee8' }}"></span>
                                            <span>{{ $color->color_name }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if(isset($product->addons) && $product->addons->count() > 0)
                            <div class="option-box">
                                <label class="option-title">
                                    <i class="fas fa-plus-circle"></i> Add Extra Addons
                                </label>

                                <div class="addon-list">
                                    @foreach($product->addons as $addon)
                                        <label class="addon-item">
                                            <input type="checkbox"
                                                   name="addons[]"
                                                   value="{{ $addon->id }}"
                                                   data-price="{{ $addon->addon_price ?? 0 }}">

                                            <div class="addon-content">
                                                <div>
                                                    <strong>{{ $addon->addon_label }}</strong>
                                                    <small class="d-block text-muted">
                                                        {{ ($addon->addon_type ?? '') == 'per_qty' ? 'Per Quantity' : 'Per Order' }}
                                                    </small>
                                                </div>

                                                <div class="addon-price">
                                                    + ₹{{ number_format($addon->addon_price ?? 0, 2) }}
                                                </div>
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <div class="qty-cart-row">
                            <div class="qty-box">
                                <button type="button" class="qty-btn" onclick="decreaseQty()">-</button>
                                <input type="text" id="productQty" class="qty-input" value="1" readonly>
                                <button type="button" class="qty-btn" onclick="increaseQty()">+</button>
                            </div>

                            @if(($product->stock ?? '') == 'Out of Stock')
                                <a href="javascript:void(0)" class="btn-cart-main" style="background:#94a3b8;cursor:not-allowed;">
                                    <i class="fas fa-ban"></i> Out of Stock
                                </a>
                            @else
                                <a href="javascript:void(0)"
                                   class="btn-cart-main {{ $inCart ? 'goToCartBtn' : 'addToCartBtn' }}"
                                   data-id="{{ $product->id }}">

                                    <i class="fa {{ $inCart ? 'fa-check' : 'fa-shopping-cart' }} mr-1"></i>

                                    <span class="btn-text">
                                        {{ $inCart ? 'Go To Cart' : 'Add To Cart' }}
                                    </span>
                                </a>
                            @endif
                        </div>

                        <div class="meta-list">
                            <p class="d-none"><strong>SKU:</strong> PROD-{{ str_pad($product->id, 4, '0', STR_PAD_LEFT) }}</p>
                            <p><strong>SKU:</strong> {{ $product->productCode }}</p>
                            <p><strong>Category:</strong> {{ $product->category->categoryName ?? 'Printing Product' }}</p>
                            <p>
                                <strong>Availability:</strong>
                                @if(($product->stock ?? '') == 'Out of Stock')
                                    <span class="text-danger font-weight-bold">{{ $product->stock }}</span>
                                @elseif(($product->stock ?? '') == 'Low Stock')
                                    <span class="text-warning font-weight-bold">{{ $product->stock }}</span>
                                @else
                                    <span class="text-success font-weight-bold">{{ $product->stock ?? 'Available' }}</span>
                                @endif
                            </p>
                            <p><strong>Shipping:</strong> Delivery available across India</p>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <div class="detail-box">
            <h4>Product Description</h4>
            <p>
                {!! $product->productDescription ?: 'This premium product is specially designed for professional printing and customization. It is suitable for business branding, gifting, marketing and personal use.' !!}
            </p>
        </div>

        <div class="detail-box">
            <h4>Specifications</h4>

            <table class="spec-table">
                <tr>
                    <th>Product Name</th>
                    <td>{{ $product->productName }}</td>
                </tr>
                <tr>
                    <th>Category</th>
                    <td>{{ $product->category->categoryName ?? 'Printing Product' }}</td>
                </tr>
                <tr>
                    <th>Selling Price</th>
                    <td>₹{{ number_format($defaultPrice, 2) }}</td>
                </tr>
                @if($defaultMrp > 0)
                    <tr>
                        <th>MRP</th>
                        <td>₹{{ number_format($defaultMrp, 2) }}</td>
                    </tr>
                @endif
                <tr>
                    <th>Stock Status</th>
                    <td>{{ $product->stock ?? 'Available' }}</td>
                </tr>

                @if(isset($product->specifications) && $product->specifications->count() > 0)
                    @foreach($product->specifications as $spec)
                        <tr>
                            <th>{{ $spec->specificationTitle ?? $spec->title ?? 'Specification' }}</th>
                            <td>{{ $spec->specificationValue ?? $spec->value ?? '' }}</td>
                        </tr>
                    @endforeach
                @endif

                <tr>
                    <th>Customization</th>
                    <td>Available on request</td>
                </tr>
            </table>
        </div>

        @if(isset($relatedProducts) && $relatedProducts->count() > 0)
            <h3 class="related-title">Related Products</h3>

            <div class="row">
                @foreach($relatedProducts as $item)
                    @php
                        $relatedPrice = $item->final_price ?? 0;

                        if(($item->has_price_variant ?? 'no') == 'yes' && isset($item->priceVariants) && $item->priceVariants->count() > 0){
                            $relatedVariant = $item->priceVariants->sortBy('final_price')->first();
                            if($relatedVariant){
                                $relatedPrice = $relatedVariant->final_price ?? 0;
                            }
                        }
                    @endphp

                    <div class="col-lg-3 col-md-6 mb-4">
                        <div class="related-card">
                            <div class="related-img">
                                <img src="{{ asset($item->thumbImage ?? $item->image_url) }}" alt="{{ $item->productName }}">
                            </div>

                            <div class="related-content">
                                <h5>
                                    <a href="{{ route('product.details', $item->id) }}">
                                        {{ $item->productName }}
                                    </a>
                                </h5>

                                <div class="related-price">
                                    ₹{{ number_format($relatedPrice, 2) }}
                                </div>

                                <a href="{{ route('product.details', $item->id) }}" class="btn-related">
                                    View Product
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

    </div>
</section>

<div id="cart-toast" class="cart-toast">
    <div class="cart-toast-content">
        <i class="fas fa-check-circle"></i>
        <span id="cart-toast-text">Added to cart</span>

        <a href="{{ route('cart.index') }}" id="view-cart-btn" class="view-cart-btn d-none">
            View Cart
        </a>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<script>
function initZoom(image = null){

    $('.zoomContainer').remove();

    $('#mainProductImage').removeData('elevateZoom');

    if(image){
        $('#mainProductImage')
            .attr('src', image)
            .attr('data-zoom-image', image);
    }

    $('#mainProductImage').elevateZoom({
        zoomType: "window",
        cursor: "crosshair",
        zoomWindowPosition: 1,
        zoomWindowWidth: 450,
        zoomWindowHeight: 450,
        borderSize: 2,
        borderColour: "#2f5ee8"
    });
}
$(document).ready(function(){

    initZoom();

});
</script>
<script>
function showToast(message, showButton = false) {
    const toast = document.getElementById('cart-toast');
    const text = document.getElementById('cart-toast-text');
    const btn = document.getElementById('view-cart-btn');

    text.innerText = message;

    if (showButton) {
        btn.classList.remove('d-none');
    } else {
        btn.classList.add('d-none');
    }

    toast.classList.add('show');

    setTimeout(() => {
        toast.classList.remove('show');
    }, 4000);
}

function changeProductImage(element, imageUrl){

    var ez = $('#mainProductImage').data('elevateZoom');

    if(ez){
        ez.swaptheimage(imageUrl, imageUrl);
    }else{
        $('#mainProductImage')
            .attr('src', imageUrl)
            .attr('data-zoom-image', imageUrl);

        initZoom();
    }

    $('.thumb-item').removeClass('active');
    $(element).addClass('active');
}
function increaseQty() {
    let qtyInput = document.getElementById('productQty');
    qtyInput.value = parseInt(qtyInput.value) + 1;
}

function decreaseQty() {
    let qtyInput = document.getElementById('productQty');
    let currentQty = parseInt(qtyInput.value);

    if (currentQty > 1) {
        qtyInput.value = currentQty - 1;
    }
}

$(document).on('change','input[name="color_variant"]',function(){

    var image=$(this).data('color-image');

    changeProductImage($('.thumb-item.active')[0], image);

});

$(document).on('change', 'input[name="price_variant"]', function () {
    let price = parseFloat($(this).data('price'));
    let mrp = parseFloat($(this).data('mrp'));

    if (isNaN(price)) price = 0;
    if (isNaN(mrp)) mrp = 0;

    $('#mainPrice').text('₹' + price.toFixed(2));

    if (mrp > price) {
        let discount = Math.round(((mrp - price) / mrp) * 100);

        $('#mainOldPrice').text('₹' + mrp.toFixed(2)).show();
        $('#mainDiscountPercent').text(discount + '% Off').show();
        $('#badgeDiscount').text(discount + '% Off').show();
    } else {
        $('#mainOldPrice').hide();
        $('#mainDiscountPercent').hide();
        $('#badgeDiscount').hide();
    }
});

$(document).on('click', '.addToCartBtn', function () {
    let selectedAddons = [];

    $('input[name="addons[]"]:checked').each(function () {
        selectedAddons.push($(this).val());
    });

    let btn = $(this);
    let product_id = btn.data('id');

    btn.css('pointer-events', 'none');
    btn.find('.btn-text').text('Adding...');

    $.ajax({
        url: "{{ route('cart.add') }}",
        type: "POST",
        data: {
            product_id: product_id,
            variant_id: $('input[name="price_variant"]:checked').val() || '',
            color_variant_id: $('input[name="color_variant"]:checked').val() || '',
            addons: selectedAddons,
            qty: $('#productQty').val(),
            _token: "{{ csrf_token() }}"
        },
        success: function (res) {
            btn.css('pointer-events', 'auto');

            if (res.status === 'login_required') {
                window.location.href = "{{ url('/login') }}";
                return;
            }

            if (res.status === 'added' || res.status === 'exists') {
                showToast(res.status === 'exists' ? "Already in cart" : "Added to cart successfully", true);

                btn.find('.btn-text').text('Go To Cart');
                btn.find('i').removeClass('fa-shopping-cart').addClass('fa-check');
                btn.removeClass('addToCartBtn').addClass('goToCartBtn');

                if (res.cart_count !== undefined) {
                    $('.cart-count').text(res.cart_count);
                }
            } else {
                btn.find('.btn-text').text('Add To Cart');
                showToast(res.message || "Something went wrong");
            }
        },
        error: function () {
            btn.css('pointer-events', 'auto');
            btn.find('.btn-text').text('Add To Cart');
            showToast("Something went wrong. Please try again.");
        }
    });
});

$(document).on('click', '.goToCartBtn', function () {
    window.location.href = "{{ route('cart.index') }}";
});
</script>

<style>
:root{
    --pl-blue:#FFB300;
    --pl-dark:#071342;
    --pl-soft:#f4f7ff;
    --pl-border:#dce7ff;
    --pl-muted:#64748b;
    --pl-green:#16a34a;
    --pl-red:#ef4444;
    --pl-orange:#f59e0b;
}
.prepaid-discount-box{
    margin-top:15px;
    padding:14px 18px;
    background:linear-gradient(135deg,#fff7d6,#ffeaa7);
    border:1px solid #f3d15c;
    border-left:5px solid #f4b400;
    border-radius:10px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#5f4200;
    font-size:15px;
    line-height:1.6;
    box-shadow:0 4px 12px rgba(244,180,0,.15);
}

.prepaid-discount-box i{
    color:#ff9800;
    font-size:22px;
    margin-top:2px;
    flex-shrink:0;
}

.prepaid-discount-box strong{
    color:#b26a00;
}

@media (max-width:768px){
    .prepaid-discount-box{
        font-size:14px;
        padding:12px 15px;
    }

    .prepaid-discount-box i{
        font-size:20px;
    }
}
.zoomContainer{
    z-index:99999 !important;
}

.zoomWindow{
    border:2px solid #dce7ff !important;
    border-radius:16px;
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.main-product-image{
    position:relative;
    overflow:hidden;
}

#mainProductImage{
    cursor:crosshair;
}
.product-detail-section{
    padding:70px 0;
    background: radial-gradient(circle at top right, rgb(232 209 47 / 14%), #00000000 30%), linear-gradient(180deg, #fffef7, #fff 45%, #fffbee);
}

.breadcrumb-wrap{
    background:#fff;
    border:1px solid var(--pl-border);
    border-radius:18px;
    padding:14px 20px;
    margin-bottom:28px;
    box-shadow:0 12px 35px rgba(47,94,232,.08);
    color:var(--pl-muted);
    font-weight:700;
}

.breadcrumb-wrap a{
    color:var(--pl-blue);
    text-decoration:none;
}

.product-main-card{
    background:rgba(255,255,255,.94);
    border:1px solid var(--pl-border);
    border-radius:32px;
    padding:28px;
    box-shadow:0 24px 70px rgba(15,23,42,.10);
}

.gallery-card{
    background: linear-gradient(135deg, #fffdf8, #fffbee);
    border: 1px solid #f9f198;
    border-radius:28px;
    padding:20px;
    position:relative;
}

.main-product-image{
    background:#fff;
    border-radius:24px;
    padding:18px;
    text-align:center;
    min-height:460px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.main-product-image img{
    width:100%;
    max-height:430px;
    object-fit:contain;
    border-radius:18px;
}

.product-badge-group{
    position:absolute;
    top:18px;
    left:18px;
    z-index:5;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.product-badge{
    padding:7px 13px;
    border-radius:999px;
    color:#fff;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}

.badge-stock{background:var(--pl-blue);}
.badge-out{background:var(--pl-red);}
.badge-low{background:var(--pl-orange);}
.badge-sale{background:var(--pl-dark);}

.thumb-list{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:16px;
}

.thumb-item{
    width:84px;
    height:84px;
    border-radius:16px;
    overflow:hidden;
    border:2px solid var(--pl-border);
    background:#fff;
    cursor:pointer;
    transition:.25s;
}

.thumb-item.active,
.thumb-item:hover{
    border-color:var(--pl-blue);
    transform:translateY(-3px);
}

.thumb-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.info-card{
    padding:10px 8px;
}

.product-category{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: #fffbee;
    color: #e8b62f;
    padding:9px 15px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.7px;
    margin-bottom:15px;
}

.product-title{
    color:var(--pl-dark);
    font-size:38px;
    font-weight:950;
    line-height:1.18;
    margin-bottom:16px;
}

.short-description{
    color:var(--pl-muted);
    line-height:1.8;
    font-size:15px;
    margin-bottom:22px;
}

.price-box{
    background:#fff;
    border:1px dashed var(--pl-border);
    border-radius:22px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:22px;
}

.current-price{
    font-size:34px;
    font-weight:950;
    color:var(--pl-dark);
}

.old-price{
    font-size:20px;
    color:#94a3b8;
    text-decoration:line-through;
}

.save-price{
    background:#dcfce7;
    color:#15803d;
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
}

.option-box{
    background:#fff;
    border:1px solid var(--pl-border);
    border-radius:22px;
    padding:18px;
    margin-bottom:16px;
}

.option-title{
    color:var(--pl-dark);
    font-weight:950;
    margin-bottom:13px;
    display:block;
}

.variant-list,
.color-variant-list,
.addon-list{
    display:grid;
    gap:11px;
}

.variant-item,
.color-variant-item,
.addon-item{
    border:1px solid var(--pl-border);
    border-radius:16px;
    padding:14px;
    cursor:pointer;
    background:#fff;
    transition:.25s;
}

.variant-item:hover,
.color-variant-item:hover,
.addon-item:hover{
    border-color:var(--pl-blue);
    background:#f8fbff;
}

.variant-item input,
.color-variant-item input,
.addon-item input{
    display:none;
}

.variant-item:has(input:checked),
.color-variant-item:has(input:checked),
.addon-item:has(input:checked){
    border-color:var(--pl-blue);
    background:#fffbee;
    box-shadow:inset 0 0 0 1px var(--pl-blue);
}

.variant-content,
.addon-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.variant-price,
.addon-price{
    font-size:17px;
    font-weight:950;
    color:var(--pl-dark);
}

.color-variant-item{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:850;
    color:var(--pl-dark);
}

.color-circle{
    width:30px;
    height:30px;
    border-radius:50%;
    border:3px solid #fff;
    box-shadow:0 0 0 1px #cbd5e1;
}

.qty-cart-row{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:center;
    margin:24px 0;
}

.qty-box{
    display:flex;
    align-items:center;
    border:1px solid var(--pl-border);
    background:#fff;
    border-radius:16px;
    overflow:hidden;
}

.qty-btn{
    width:48px;
    height:50px;
    border:none;
    background:#f8fbff;
    font-size:20px;
    font-weight:950;
    color:var(--pl-dark);
}

.qty-input{
    width:58px;
    height:50px;
    border:none;
    text-align:center;
    font-weight:950;
    outline:none;
}

.btn-cart-main{
    border:0;
    background:#FFC107;
    color:#fff;
    border-radius:16px;
    padding:15px 28px;
    font-weight:950;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:9px;
    box-shadow:0 16px 35px rgb(232 185 47 / 25%);
    transition:.25s;
}

.btn-cart-main:hover{
    color:#fff;
    text-decoration:none;
    transform:translateY(-2px);
}

.meta-list{
    border-top:1px solid var(--pl-border);
    padding-top:18px;
}

.meta-list p{
    margin-bottom:9px;
    color:var(--pl-muted);
    font-size:14px;
}

.meta-list strong{
    color:var(--pl-dark);
}

.detail-box{
    background:#fff;
    border:1px solid var(--pl-border);
    border-radius:26px;
    padding:28px;
    margin-top:28px;
    box-shadow:0 14px 40px rgba(47,94,232,.08);
}

.detail-box h4{
    color:var(--pl-dark);
    font-size:23px;
    font-weight:950;
    margin-bottom:18px;
}

.detail-box p{
    color:var(--pl-muted);
    line-height:1.9;
}

.spec-table{
    width:100%;
    border-collapse:collapse;
}

.spec-table th,
.spec-table td{
    border:1px solid var(--pl-border);
    padding:14px;
    font-size:14px;
}

.spec-table th{
    width:230px;
    background:#f8fbff;
    color:var(--pl-dark);
    font-weight:950;
}

.spec-table td{
    color:var(--pl-muted);
}

.related-title{
    font-size:30px;
    color:var(--pl-dark);
    font-weight:950;
    margin:50px 0 25px;
}

.related-card{
    background:#fff;
    border:1px solid var(--pl-border);
    border-radius:24px;
    overflow:hidden;
    height:100%;
    box-shadow:0 14px 38px rgba(47,94,232,.08);
    transition:.3s;
}

.related-card:hover{
    transform:translateY(-7px);
    box-shadow:0 22px 55px rgba(47,94,232,.16);
}

.related-img{
    padding:16px;
    background:#f8fbff;
}

.related-img img{
    width:100%;
    height:210px;
    object-fit:cover;
    border-radius:18px;
}

.related-content{
    padding:18px;
}

.related-content h5{
    font-size:17px;
    font-weight:950;
}

.related-content h5 a{
    color:var(--pl-dark);
    text-decoration:none;
}

.related-price{
    font-size:20px;
    font-weight:950;
    color:var(--pl-dark);
    margin-bottom:12px;
}

.btn-related{
    display:block;
    text-align:center;
    background:var(--pl-blue);
    color:#fff;
    border-radius:13px;
    padding:11px 14px;
    font-weight:900;
    text-decoration:none;
}

.btn-related:hover{
    background:var(--pl-dark);
    color:#fff;
    text-decoration:none;
}

.cart-toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%) translateY(110px);
    background:var(--pl-dark);
    color:#fff;
    padding:14px 20px;
    border-radius:999px;
    box-shadow:0 15px 38px rgba(0,0,0,.28);
    z-index:999999;
    opacity:0;
    transition:.4s;
}

.cart-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.cart-toast-content{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:850;
}

.cart-toast i{
    color:#22c55e;
}

.view-cart-btn{
    margin-left:8px;
    background:var(--pl-blue);
    color:#fff;
    padding:7px 13px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
}

@media(max-width:991px){
    .product-title{font-size:30px;}
    .main-product-image{min-height:360px;}
}

@media(max-width:767px){
    .product-detail-section{padding:42px 0;}
    .product-main-card{padding:18px;border-radius:24px;}
    .main-product-image{min-height:300px;}
    .product-title{font-size:25px;}
    .current-price{font-size:28px;}
    .qty-cart-row{flex-direction:column;align-items:stretch;}
    .qty-box,.btn-cart-main{width:100%;justify-content:center;}
    .spec-table th,.spec-table td{display:block;width:100%;}
    .cart-toast{width:calc(100% - 26px);border-radius:18px;text-align:center;}
    .cart-toast-content{justify-content:center;flex-wrap:wrap;}
}

/* youtube play */
.youtube-thumb{
    position: relative;
}

.play-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 40px;
    height: 40px;

    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.play-icon i{
    color: #fff;
    font-size: 20px;
}
</style>
@endsection