/* ========================================
   Product Pages — Unified CSS
   ========================================
   Single source of truth for all product page styles.
   Replaces inline <style> blocks from:
     - products.blade.php (~230 lines)
     - product-cart.blade.php (~45 lines)
     - product-checkout.blade.php (~45 lines)
     - product-success.blade.php (~30 lines)
     - view-order.blade.php (~30 lines)
   ======================================== */


/* =============================================
   Section 1: Unified Product Card
   ============================================= */

.product-card-unified {
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card-unified:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
    border-color: var(--main-color-one, #8fc83f);
}

/* Card image */
.product-card-unified .pcu-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.product-card-unified .pcu-thumb .pcu-img-wrapper {
    overflow: hidden;
}

.product-card-unified .pcu-thumb .pcu-img-wrapper img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain;
    transition: transform 0.5s ease;
    display: block;
    background: #f8f8f8;
}

.product-card-unified:hover .pcu-thumb .pcu-img-wrapper img {
    transform: scale(1.05);
}

.product-card-unified .pcu-thumb .pcu-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--main-color-one, #8fc83f);
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

html[dir="rtl"] .product-card-unified .pcu-thumb .pcu-badge {
    left: auto;
    right: 12px;
}

/* Card content */
.product-card-unified .pcu-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-unified .pcu-content .pcu-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 68px;
    text-transform: none;
    white-space: normal;
}

.product-card-unified .pcu-content .pcu-title a {
    color: #1a1a1a;
    transition: color 0.3s ease;
}

.product-card-unified .pcu-content .pcu-title a:hover {
    color: var(--main-color-one, #8fc83f);
}

/* Rating */
.product-card-unified .pcu-rating-wrap {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-card-unified .pcu-rating-wrap .ratings {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 16px;
}

.product-card-unified .pcu-rating-wrap .ratings .hide-rating,
.product-card-unified .pcu-rating-wrap .ratings .show-rating {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.product-card-unified .pcu-rating-wrap .total-ratings {
    font-size: 13px;
    color: #878a95;
}

/* Price */
.product-card-unified .pcu-price-wrap {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.product-card-unified .pcu-price-wrap .pcu-price {
    color: var(--main-color-one, #8fc83f);
    font-size: 22px;
    font-weight: 700;
}

.product-card-unified .pcu-price-wrap .pcu-del-price {
    color: #999;
    font-size: 14px;
    text-decoration: line-through;
}

/* Out of stock */
.product-card-unified .pcu-out-of-stock {
    color: #dc3545;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    margin-top: auto;
}

/* View button */
.product-card-unified .pcu-view-btn {
    width: 100%;
    border-radius: 8px;
    padding: 12px 0;
    background: var(--main-color-one, #8fc83f);
    color: #fff;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    border: none;
    cursor: pointer;
    margin-top: auto;
}

.product-card-unified .pcu-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(143, 200, 63, 0.4);
    background: #7ab530;
    color: #fff;
}

/* POD product info badge */
.product-card-unified .pcu-pod-badge {
    display: inline-block;
    background: #f0f4ff;
    color: #4a6cf7;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
}


/* =============================================
   Section 2: Product Sidebar Widgets
   ============================================= */

.product-widget-area .widget {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.product-widget-area .widget:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    border-color: var(--main-color-one, #8fc83f);
}

.product-widget-area .widget-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    position: relative;
    color: #1a1a1a;
}

.product-widget-area .widget-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 40px;
    height: 2px;
    background: var(--main-color-one, #8fc83f);
}

html[dir="rtl"] .product-widget-area .widget-title::after {
    left: auto;
    right: 0;
}

/* Category list */
.product_category_list li {
    margin-bottom: 12px;
}

.product_category_list li a {
    color: #666;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.product_category_list li a:hover,
.product_category_list li a.active {
    color: var(--main-color-one, #8fc83f);
    padding-left: 5px;
}

.product_category_list li a::before {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
    font-size: 12px;
    opacity: 0;
    transition: all 0.3s ease;
    color: var(--main-color-one, #8fc83f);
}

.product_category_list li a:hover::before,
.product_category_list li a.active::before {
    opacity: 1;
}

html[dir="rtl"] .product_category_list li a:hover,
html[dir="rtl"] .product_category_list li a.active {
    padding-left: 0;
    padding-right: 5px;
}

html[dir="rtl"] .product_category_list li a::before {
    content: '\f104';
    margin-right: 0;
    margin-left: 8px;
}

/* Rating filter */
.ratings_filter_list li {
    margin-bottom: 12px;
}

.single-rating-filter-wrap label {
    cursor: pointer;
    color: #666;
    transition: color 0.3s ease;
}

.single-rating-filter-wrap input[type="radio"]:checked + label {
    color: var(--main-color-one, #8fc83f);
    font-weight: 600;
}


/* =============================================
   Section 3: Cart Page
   ============================================= */

.shipping-image {
    max-width: 40px;
    height: auto;
}

.shipping-image img {
    max-width: 100%;
    height: auto;
}

table.table-bordered td {
    vertical-align: middle;
}

.cart-thumbnail,
.thumbnail img,
.design img,
.raw-design img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}

.cart-thumbnail:hover,
.thumbnail img:hover,
.design img:hover,
.raw-design img:hover {
    opacity: 0.8;
}

.change-shipping-address {
    margin-top: 20px;
}

/* RTL Support for Cart */
html[dir="rtl"] .cart-wrapper {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .cart-wrapper .table,
html[dir="rtl"] .cart-wrapper .table td,
html[dir="rtl"] .cart-wrapper .table th {
    text-align: right;
}

html[dir="rtl"] .cart-wrapper .shipping-details-wrap,
html[dir="rtl"] .cart-wrapper .title {
    text-align: right;
}

html[dir="rtl"] .cart-wrapper input[type="radio"] {
    margin-left: 10px;
    margin-right: 0;
}

html[dir="rtl"] .cart-wrapper .shipping-cost {
    text-align: right;
}


/* =============================================
   Section 4: Checkout Page
   ============================================= */

/* Stripe payment element */
#stripe-payment-element-wrap {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

#stripe-payment-element-wrap h5 {
    margin-bottom: 15px;
    font-size: 15px;
    font-weight: 600;
}

#stripe-payment-element {
    min-height: 100px;
}

#stripe-payment-element-loading {
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 14px;
}

#stripe-payment-errors {
    color: #fa755a;
    font-size: 13px;
    margin-top: 10px;
    min-height: 20px;
}

/* Form validation */
.form-group.invalid .form-control {
    border-color: #fa755a;
}

.form-group.invalid .error-message {
    color: #fa755a;
    font-size: 12px;
    margin-top: 5px;
}


/* =============================================
   Section 5: Order Pages (success + view-order)
   ============================================= */

.ordered-product-summery .attributes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ordered-product-summery .attributes-list li {
    margin-bottom: 5px;
}

.billing-and-shipping-details .details-table,
.extra-data .details-table {
    margin-bottom: 20px;
}

.billing-and-shipping-details .details-table td,
.extra-data .details-table td {
    vertical-align: top;
}

.product-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}

.product-thumbnail img:hover {
    opacity: 0.8;
}

.ordered-product-summery table td {
    vertical-align: middle;
}

/* Tax highlight (replaces inline style="color: red") */
.tax-highlight {
    color: #dc3545;
}


/* =============================================
   Section 6: Legacy — single-product-item-3
   Keep for backward compat with AJAX responses
   ============================================= */

.single-product-item-3 {
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
}

.single-product-item-3:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.single-product-item-3 .price-wrap {
    margin-bottom: 15px;
    justify-content: center;
    background: transparent;
    padding: 0;
}

.single-product-item-3 .price-wrap .price {
    background: transparent;
    padding: 0;
    color: var(--main-color-one, #8fc83f);
    font-size: 22px;
}

.single-product-item-3 .addtocart,
.single-product-item-3 .view-product-btn {
    width: 100%;
    border-radius: 8px;
    padding: 12px 0;
    background: var(--main-color-one, #8fc83f);
    color: #fff;
    transition: all 0.3s ease;
    animation: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
}

.single-product-item-3 .content .title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 68px;
    text-transform: none;
    white-space: normal;
}

.single-product-item-3 .addtocart:hover,
.single-product-item-3 .view-product-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(143, 200, 63, 0.4);
    background: #7ab530;
}


/* =============================================
   Section 7: Dark Mode
   ============================================= */

/* Product card unified - dark mode */
body.dark-mode-enabled .product-card-unified {
    background: var(--dark-surface, #1a1a2e);
    border-color: var(--dark-border, #2a3f5f);
}

body.dark-mode-enabled .product-card-unified .pcu-thumb .pcu-img-wrapper img {
    background: #12122a;
}

body.dark-mode-enabled .product-card-unified:hover {
    border-color: var(--dark-accent, #4a9eff);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode-enabled .product-card-unified .pcu-content .pcu-title a {
    color: var(--dark-text, #e0e0e0);
}

body.dark-mode-enabled .product-card-unified .pcu-content .pcu-title a:hover {
    color: var(--dark-accent, #4a9eff);
}

body.dark-mode-enabled .product-card-unified .pcu-price-wrap .pcu-del-price {
    color: #777;
}

body.dark-mode-enabled .product-card-unified .pcu-rating-wrap .total-ratings {
    color: #999;
}

body.dark-mode-enabled .product-card-unified .pcu-pod-badge {
    background: rgba(74, 108, 247, 0.15);
    color: #7b9cf7;
}

body.dark-mode-enabled .product-card-unified .pcu-out-of-stock {
    color: #ff6b6b;
}

/* View button - dark mode: use accent blue */
body.dark-mode-enabled .product-card-unified .pcu-view-btn {
    background: var(--dark-accent, #4a9eff);
}

body.dark-mode-enabled .product-card-unified .pcu-view-btn:hover {
    background: #3a8eef;
    box-shadow: 0 5px 15px rgba(74, 158, 255, 0.4);
}

body.dark-mode-enabled .product-card-unified .pcu-price-wrap .pcu-price {
    color: var(--dark-accent, #4a9eff);
}

/* Legacy card - dark mode */
body.dark-mode-enabled .single-product-item-3 {
    background: var(--dark-surface, #1a1a2e);
    border-color: var(--dark-border, #2a3f5f);
}

body.dark-mode-enabled .single-product-item-3 .title,
body.dark-mode-enabled .single-product-item-3 .content .title {
    color: var(--dark-text, #e0e0e0);
}

body.dark-mode-enabled .single-product-item-3 .out_of_stock {
    color: #ff6b6b;
}

body.dark-mode-enabled .single-product-item-3 .price-wrap .del-price {
    color: #777;
}

/* Sidebar widgets - dark mode */
body.dark-mode-enabled .product-widget-area .widget {
    background: var(--dark-surface, #1a1a2e);
    border-color: var(--dark-border, #2a3f5f);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

body.dark-mode-enabled .product-widget-area .widget:hover {
    border-color: var(--main-color-one, #8fc83f);
}

body.dark-mode-enabled .product-widget-area .widget-title {
    color: var(--dark-text, #e0e0e0);
    border-bottom-color: var(--dark-border, #2a3f5f);
}

body.dark-mode-enabled .product_category_list li a {
    color: #b0b0b0;
}

body.dark-mode-enabled .product_category_list li a:hover,
body.dark-mode-enabled .product_category_list li a.active {
    color: var(--main-color-one, #8fc83f);
}

body.dark-mode-enabled .single-rating-filter-wrap label {
    color: #b0b0b0;
}

body.dark-mode-enabled .single-rating-filter-wrap input[type="radio"]:checked + label {
    color: var(--main-color-one, #8fc83f);
}

/* Search & sorting bar - dark mode */
body.dark-mode-enabled .product-archive-top-content-area {
    background: var(--dark-surface, #1a1a2e);
    border: 1px solid var(--dark-border, #2a3f5f);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 30px;
}

body.dark-mode-enabled .product-sorting select {
    background-color: var(--dark-surface, #1a1a2e);
    color: var(--dark-text, #e0e0e0);
    border-color: var(--dark-border, #2a3f5f);
}

body.dark-mode-enabled .search-form .form-control {
    background-color: var(--dark-surface, #1a1a2e);
    color: var(--dark-text, #e0e0e0);
    border-color: var(--dark-border, #2a3f5f);
}

body.dark-mode-enabled .search-form button {
    background: var(--main-color-one, #8fc83f);
    color: #fff;
}

/* Checkout Stripe - dark mode */
body.dark-mode-enabled #stripe-payment-element-wrap,
.dark-mode-enabled #stripe-payment-element-wrap {
    background: var(--dark-surface, #1a1a2e);
    border-color: var(--dark-border, #2a3f5f);
}

/* Order tables - dark mode */
body.dark-mode-enabled .order-success-area .table-bordered,
body.dark-mode-enabled .ordered-product-summery .table-bordered {
    border-color: var(--dark-border, #2a3f5f);
}

body.dark-mode-enabled .order-success-area .table-bordered td,
body.dark-mode-enabled .order-success-area .table-bordered th,
body.dark-mode-enabled .ordered-product-summery .table-bordered td,
body.dark-mode-enabled .ordered-product-summery .table-bordered th {
    border-color: var(--dark-border, #2a3f5f);
    color: var(--dark-text, #e0e0e0);
}

body.dark-mode-enabled .order-success-area .title {
    color: var(--dark-text, #e0e0e0);
}

/* Cart page - dark mode */
body.dark-mode-enabled .cart-wrapper .table-bordered {
    border-color: var(--dark-border, #2a3f5f);
}

body.dark-mode-enabled .cart-wrapper .table-bordered td,
body.dark-mode-enabled .cart-wrapper .table-bordered th {
    border-color: var(--dark-border, #2a3f5f);
    color: var(--dark-text, #e0e0e0);
}

body.dark-mode-enabled .cart-wrapper .card {
    background: var(--dark-surface, #1a1a2e);
    border-color: var(--dark-border, #2a3f5f);
}

body.dark-mode-enabled .cart-wrapper .card-header {
    background: var(--dark-bg, #0f0f1a);
    border-color: var(--dark-border, #2a3f5f);
}

body.dark-mode-enabled .cart-wrapper .card-header h4 {
    color: var(--dark-text, #e0e0e0);
}

/* Checkout - dark mode */
body.dark-mode-enabled .checkout-wrapper .billing-details-fields-wrapper .title,
body.dark-mode-enabled .checkout-wrapper .shipping-details-fields-wrapper .title {
    color: var(--dark-text, #e0e0e0);
}

body.dark-mode-enabled .checkout-wrapper .form-control {
    background: var(--dark-surface, #1a1a2e);
    border-color: var(--dark-border, #2a3f5f);
    color: var(--dark-text, #e0e0e0);
}


/* =============================================
   Section 8: Responsive
   ============================================= */

@media (max-width: 991px) {
    .product-card-unified .pcu-thumb .pcu-img-wrapper img {
        max-height: 220px;
    }

    .product-card-unified .pcu-content .pcu-title {
        font-size: 15px;
        min-height: 60px;
    }

    .product-card-unified .pcu-price-wrap .pcu-price {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .product-card-unified .pcu-thumb .pcu-img-wrapper img {
        max-height: 200px;
    }

    .product-card-unified .pcu-content {
        padding: 15px;
    }

    .product-card-unified .pcu-content .pcu-title {
        font-size: 14px;
        min-height: 56px;
        -webkit-line-clamp: 2;
    }

    .product-card-unified .pcu-price-wrap .pcu-price {
        font-size: 18px;
    }

    .product-card-unified .pcu-view-btn {
        font-size: 14px;
        padding: 10px 0;
    }
}

@media (max-width: 575px) {
    .product-card-unified .pcu-thumb .pcu-img-wrapper img {
        max-height: 180px;
    }
}