/* anwbd/css/single-product.css (Final & Cleaned Version) */

/* ==========================================================
   ১. মূল লেআউট (সাইডবার এবং প্রধান অংশ)
   ========================================================== */
.anewbd-single-product-layout-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* বাম সাইডবার */
.anewbd-product-sidebar {
    width: 350px; /* সাইডবারের প্রস্থ */
    flex-shrink: 0;
}

.sidebar-product-section .related-products-section-checkout,
.sidebar-product-section .anewbd-featured-products-wrapper {
    margin-bottom: 25px;
}

/* ডান পাশের মূল কন্টেন্ট */
.anewbd-product-main-content {
    flex-grow: 1;
    min-width: 0; /* Ensures the content wraps correctly */
}


/* ==========================================================
   ২. পণ্যের ডান পাশের তথ্যের স্টাইল
   ========================================================== */
.product-summary-section .product-categories a {
    text-decoration: none;
    background-color: #eef4ff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    margin-right: 5px;
}

.product-summary-section h1.product_title {
    font-size: 26px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.product-summary-section .price {
    font-size: 28px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 20px;
    color: var(--theme-link-color); /* আপনার থিমের কালার ভ্যারিয়েবল ব্যবহার */
}

/* Key Features (Attributes) লিস্টের জন্য স্টাইল */
.product-key-features-list ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
    color: #444;
}

.product-key-features-list ul li {
    margin-bottom: 8px;
    font-size: 15px;
}

/* ==========================================================
   ৩. নতুন ফিচার বার (ওয়ারেন্টি, ডেলিভারি)
   ========================================================== */
.anewbd-features-bar {
    display: flex;
    justify-content: space-around;
    background: #f3f7ff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.anewbd-features-bar .feature-item {
    text-align: center;
    color: #333;
}


/* ==========================================================
   ৪. রেসপন্সিভ ডিজাইন
   ========================================================== */
@media (max-width: 992px) {
    .anewbd-single-product-layout-wrapper {
        flex-direction: column;
    }

    .anewbd-product-sidebar {
        width: 100%;
        order: 2; /* মোবাইলে সাইডবার নিচে দেখাবে */
    }

    .anewbd-product-main-content {
        order: 1; /* মোবাইলে মূল কন্টেন্ট আগে দেখাবে */
    }
}



/* anwbd/css/single-product.css ফাইলের শেষে যোগ করুন */

/* --- পণ্যের ডান পাশের তথ্যের চূড়ান্ত স্টাইল --- */
.product-summary-section .product-categories {
    margin-bottom: 5px;
}
.product-summary-section .product-categories a {
    text-decoration: none;
    font-size: 14px;
    color: #555;
}

.product-summary-section h1.product_title {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 10px;
}

.product-summary-section .price {
    font-size: 26px;
    margin-bottom: 20px;
}

/* Attributes টেবিলের ডিজাইন */
.woocommerce div.product .woocommerce-product-attributes {
    border: none;
    margin-bottom: 20px;
}
.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes td {
    border: none;
    padding: 6px 0;
    font-size: 15px;
}
.woocommerce div.product .woocommerce-product-attributes th {
    font-weight: 600;
    width: 150px; /* লেবেলের জন্য নির্দিষ্ট প্রস্থ */
}
.woocommerce div.product .woocommerce-product-attributes td p {
    margin: 0;
}
.woocommerce-product-attributes__value {
    font-weight: 500;
}

/* Wishlist বাটনের জন্য স্টাইল */
.summary .wishlist-wrapper {
    margin-bottom: 15px;
}


/* anwbd/css/single-product.css ফাইলে যোগ করুন */

/* ==========================================================
   ৫. পণ্যের গ্যালারি এবং তথ্যের ইউনিফাইড বক্স লেআউট (আপনার চাহিদা অনুযায়ী)
   ========================================================== */

/* মূল কন্টেইনারকে একটি সাদা বক্স বানানো হলো */
.product-main-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    background-color: #ffffff; /* সাদা ব্যাকগ্রাউন্ড */
    padding: 25px; /* ভেতরের সবদিকে প্যাডিং */
    border: 1px solid #e0e0e0; /* হালকা বর্ডার */
    border-radius: 8px; /* কোণাগুলো রাউন্ড করা হলো */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* হালকা শ্যাডো */
}

/* বাম পাশের গ্যালারি সেকশন */
.product-gallery-section {
    flex: 1 1 45%; /* প্রস্থের ৪৫% জায়গা নেবে */
    max-width: 45%;
}

/* ডান পাশের পণ্যের তথ্য সেকশন */
.product-summary-section {
    flex: 1 1 55%; /* প্রস্থের বাকি ৫৫% জায়গা নেবে */
    max-width: 55%;
}

/* আগের দেওয়া তথ্যের বক্সের ডিজাইনটি এখন আর প্রয়োজন নেই, তাই এটি সরিয়ে দেওয়া হলো */
.product-summary-section .entry-summary {
    padding: 0;
    border: none;
    background-color: transparent; /* ব্যাকগ্রাউন্ড স্বচ্ছ করা হলো */
}

/* --- মোবাইলের জন্য রেসপন্সিভ স্টাইল --- */
@media (max-width: 768px) {
    .product-main-layout {
        flex-direction: column; /* মোবাইল ভিউতে কলাম আকারে সাজানো হবে */
        padding: 15px;
    }

    .product-gallery-section,
    .product-summary-section {
        max-width: 100%; /* মোবাইল ভিউতে পুরো প্রস্থ নেবে */
    }
}



/* anewbd/css/single-product.css ফাইলের শেষে যোগ করুন */

/* ==========================================================
   ৬. ছবির মতো নতুন ডিজাইনের জন্য চূড়ান্ত CSS
   ========================================================== */

.anewbd-summary h1.product_title {
    font-size: 24px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
}

.product-meta-badges, .product-meta-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-bottom: 15px;
    font-size: 14px;
}
.product-meta-badges span, .product-meta-secondary span {
    background-color: #f3f4f6;
    padding: 5px 12px;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
}

.anewbd-summary .star-rating { margin-bottom: 15px; }

.key-specs-list .woocommerce-product-details__short-description ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}
.key-specs-list .woocommerce-product-details__short-description ul li {
    margin-bottom: 5px;
}

/* মূল্য এবং EMI বক্স */
.price-emi-box {
    display: flex;
    gap: 20px;
    background-color: #f3f7ff;
    border: 1px solid #dde8ff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.price-section, .emi-section { flex: 1; }
.price-label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
}
.price-section .price {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.price-section .price ins { color: #d0021b; }
.price-section .price del { font-size: 20px; }
.emi-section .emi-price {
    font-size: 28px;
    font-weight: 700;
    color: #0d6efd;
}
.payment-method-link, .view-emi-link {
    font-size: 13px;
    text-decoration: none;
    display: block;
    margin-top: 8px;
}

/* অ্যাকশন বাটনগুলো */
.anewbd-actions-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.anewbd-actions-wrapper .quantity { margin-right: 10px; }
.anewbd-actions-wrapper .single_add_to_cart_button {
    flex-grow: 1;
}
.anewbd-actions-wrapper .quick-buy-button {
    background-color: #ff4757 !important;
}
.anewbd-actions-wrapper .tinvwl_add_to_wishlist_button {
    font-size: 0;
    padding: 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
}
.anewbd-actions-wrapper .tinvwl_add_to_wishlist_button i {
    font-size: 18px;
}



/* ==========================================================
   ৫. পণ্যের গ্যালারি এবং তথ্যের ইউনিফাইড বক্স লেআউট
   ========================================================== */

/* মূল কন্টেইনারকে একটি সাদা বক্স বানানো হলো */
.product-main-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    background-color: #ffffff; /* সাদা ব্যাকগ্রাউন্ড */
    padding: 25px; /* ভেতরের সবদিকে প্যাডিং */
    border: 1px solid #e0e0e0; /* হালকা বর্ডার */
    border-radius: 8px; /* কোণাগুলো রাউন্ড করা হলো */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* হালকা শ্যাডো */
    margin-bottom: 30px; /* নিচের ট্যাব সেকশন থেকে দূরত্ব */
    align-items: flex-start;
}

/* বাম পাশের গ্যালারি সেকশন */
.product-gallery-section {
    flex: 1 1 40%; /* প্রস্থের ৪০% জায়গা নেবে */
    max-width: 40%;
}

/* ডান পাশের পণ্যের তথ্য সেকশন */
.product-summary-section {
    flex: 1 1 60%; /* প্রস্থের বাকি ৬০% জায়গা নেবে */
    max-width: 60%;
}

/* --- মোবাইলের জন্য রেসপন্সিভ স্টাইল --- */
@media (max-width: 768px) {
    .product-main-layout {
        flex-direction: column; /* মোবাইল ভিউতে কলাম আকারে সাজানো হবে */
        padding: 15px;
    }

    .product-gallery-section,
    .product-summary-section {
        max-width: 100%; /* মোবাইল ভিউতে পুরো প্রস্থ নেবে */
    }
}

/* ==========================================================
   ৭. পণ্যের বিস্তারিত ট্যাব সেকশনের নতুন প্রফেশনাল ডিজাইন
   ========================================================== */

/* --- মূল ট্যাব কন্টেইনার --- */
.woocommerce-tabs.wc-tabs-wrapper {
    background-color: #ffffff;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-top: 30px;
}

/* --- ট্যাবের বাটন লিস্ট (ul) --- */
.woocommerce-tabs .wc-tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0 !important; /* Important for overriding defaults */
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #e0e0e0;
}

/* --- প্রতিটি ট্যাব বাটন (li) --- */
.woocommerce-tabs .wc-tabs li {
    margin: 0 !important; /* Important for overriding defaults */
    padding: 0;
    border: none !important; /* Important for overriding defaults */
    background-color: transparent !important; /* Important for overriding defaults */
}

/* --- ট্যাবের লিঙ্ক (a) --- */
.woocommerce-tabs .wc-tabs li a {
    display: block;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    transform: translateY(2px); /* সামান্য উপরে তোলা হলো */
}

/* --- হোভার ইফেক্ট --- */
.woocommerce-tabs .wc-tabs li a:hover {
    color: #101828;
    background-color: #f3f7ff;
    border-radius: 6px 6px 0 0;
}

/* --- অ্যাক্টিভ ট্যাবের স্টাইল --- */
.woocommerce-tabs .wc-tabs li.active a {
    color: #27ae60;
    border-bottom-color: #27ae60;
    background-color: transparent !important; /* Important for overriding defaults */
    box-shadow: none;
}

/* --- ট্যাবের ভেতরের কন্টেন্ট প্যানেল --- */
.woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 20px 0 0 0; /* উপরে প্যাডিং দেওয়া হলো */
    line-height: 1.7;
    color: #333;
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
    display: none; /* ডিফল্ট শিরোনাম লুকানো হলো */
}

/* --- রিভিউ সেকশনের জন্য অতিরিক্ত স্টাইল --- */
#reviews #comments ol.commentlist {
    padding-left: 0;
}

#reviews .comment-text {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background: #f8f9fa;
}



/* ==========================================================
   ১২. প্রোডাক্ট গ্যালারিকে পুরো জায়গা জুড়ে দেখানোর জন্য চূড়ান্ত কোড
   ========================================================== */

/* ক. গ্যালারি সেকশনের লেআউট রিসেট করা হলো */
.product-gallery-section {
    display: block !important; /* মাঝখানে আনার কোডকে বাতিল করা হলো */
    width: 100%;
}

/* খ. WooCommerce গ্যালারির মূল কন্টেইনারকে পুরো প্রস্থ দেওয়া হলো */
.woocommerce div.product div.images.woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important; /* ডিফল্ট float স্টাইল हटाया হলো */
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

/* গ. মূল ছবির কন্টেইনার এবং ছবিকে পুরো প্রস্থ দেওয়া হলো */
.woocommerce-product-gallery__wrapper {
    order: 1;
    margin-bottom: 15px;
    width: 100%;
}

.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
}

/* ঘ. থাম্বনেইলগুলোকে প্রধান ছবির নিচে পাশাপাশি আনা হলো */
.woocommerce div.product .flex-control-thumbs {
    order: 2;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.woocommerce div.product .flex-control-thumbs li {
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    margin: 0;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.woocommerce div.product .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.woocommerce div.product .flex-control-thumbs li:hover,
.woocommerce div.product .flex-control-thumbs li.flex-active-slide {
    border-color: #27ae60;
}


/*
==========================================================================
   সিঙ্গেল প্রোডাক্ট পেজের বাটন ডিজাইন (রেসপন্সিভ সমাধান সহ)
==========================================================================
*/

/* --- ডেস্কটপ ভিউ (768px এর উপরে) --- */
.single-product div.product form.cart {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* পরিমাণ ইনপুট বক্সের জন্য স্টাইল */
.single-product div.product form.cart .quantity {
    margin: 0 !important;
}

/* উভয় বাটনের জন্য কমন স্টাইল */
.single-product div.product form.cart .button {
    margin: 0 !important;
    border-radius: 5px !important; /* আপনার অনুরোধ অনুযায়ী ৫px বর্ডার রেডিয়াস */
    flex-grow: 1; /* বাটন দুটিকে সমান জায়গা দেওয়া হলো */
    border: none !important; /* বাটনের ভেতরের বর্ডার সমস্যা সমাধান */
}

/* "Add to Cart" বাটনের রঙ */
.single-product div.product form.cart .single_add_to_cart_button {
    background-color: var(--all-add-to-cart-button-bg-color) !important; /* আপনার সাইটের লাল রঙ */
    color: #ffffff !important;
}

/* "Buy Now" বাটনের রঙ */
.single-product div.product form.cart .buy-now-button {
    background-color: var(--all-quick-buy-button-color) !important; /* আপনার সাইটের গাঢ় নীল রঙ */
    color: #000000 !important;
}

/* হোভার ইফেক্ট */
.single-product div.product form.cart .button:hover {
    opacity: 0.85;
}


/* --- মোবাইল ভিউ (768px এবং এর নিচে) --- */
@media (max-width: 768px) {
    /* আইটেমগুলোকে একটির নিচে আরেকটি সাজানো হলো */
    .single-product div.product form.cart {
        flex-direction: column;
        align-items: stretch; /* আইটেমগুলো পুরো প্রস্থ জুড়ে থাকবে */
    }

    /* বাটনগুলো পুরো প্রস্থ নেবে */
    .single-product div.product form.cart .button {
        width: 100%;
    }

    /* পরিমাণ ইনপুট বক্সটি মাঝখানে আসবে এবং নিচে ফাঁকা জায়গা থাকবে */
    .single-product div.product form.cart .quantity {
        margin: 0 auto 10px auto !important;
    }
}