/* Oak Fusion Theme Fixes - You Might Also Like Cards and Cart Checkout Button */

/* Fix "You Might Also Like" Cards - Replace Grey with Oak Fusion Theme */
.you-might-like-section .card,
.similar-products .card,
.product-suggestions .card,
.product-card.card,
.product-card-modern,
.recommendation-card,
.suggested-product-card,
section .card {
    background: linear-gradient(145deg, #FFFFFF 0%, var(--warm-beige) 100%) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 30px rgba(139, 38, 53, 0.12) !important;
    transition: all 0.4s ease !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 30px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.you-might-like-section .card:hover,
.similar-products .card:hover,
.product-suggestions .card:hover,
.product-card.card:hover,
.product-card-modern:hover,
.recommendation-card:hover,
.suggested-product-card:hover {
    transform: translateY(-15px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(139, 38, 53, 0.2) !important;
    background: linear-gradient(145deg, #FFFFFF 0%, var(--light-gold) 100%) !important;
}

.you-might-like-section .card-body,
.similar-products .card-body,
.product-suggestions .card-body,
.product-card.card .card-body,
.product-card-modern .card-body {
    background: transparent !important;
    color: var(--text-color) !important;
}

.you-might-like-section .card-title,
.similar-products .card-title,
.product-suggestions .card-title {
    color: var(--burgundy) !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.you-might-like-section .card-text,
.similar-products .card-text,
.product-suggestions .card-text {
    color: var(--text-color) !important;
    opacity: 0.8 !important;
}

.you-might-like-section .price,
.similar-products .price,
.product-suggestions .price {
    color: var(--burgundy) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

/* Fix Cart Checkout Button - Prevent Black Text */
.cart-checkout-btn,
.checkout-btn,
.btn-checkout,
.cart-sidebar-footer .btn-primary,
.cart-sidebar-footer .btn-success,
.cart-sidebar-footer .btn {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--deep-burgundy) 100%) !important;
    border: 2px solid var(--cream) !important;
    color: var(--cream) !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
}

.cart-checkout-btn:hover,
.checkout-btn:hover,
.btn-checkout:hover,
.cart-sidebar-footer .btn-primary:hover,
.cart-sidebar-footer .btn-success:hover,
.cart-sidebar-footer .btn:hover {
    background: linear-gradient(135deg, var(--deep-burgundy) 0%, var(--burgundy) 100%) !important;
    border-color: var(--warm-beige) !important;
    color: var(--warm-beige) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(139, 38, 53, 0.4) !important;
}

.cart-checkout-btn:active,
.checkout-btn:active,
.btn-checkout:active,
.cart-sidebar-footer .btn-primary:active,
.cart-sidebar-footer .btn-success:active,
.cart-sidebar-footer .btn:active {
    color: var(--cream) !important;
    transform: translateY(0) !important;
}

.cart-checkout-btn:focus,
.checkout-btn:focus,
.btn-checkout:focus,
.cart-sidebar-footer .btn-primary:focus,
.cart-sidebar-footer .btn-success:focus,
.cart-sidebar-footer .btn:focus {
    color: var(--cream) !important;
    box-shadow: 0 0 0 3px rgba(139, 38, 53, 0.2) !important;
}

/* Specific Cart Sidebar Checkout Button Fix */
.cart-sidebar-footer .btn-block {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--deep-burgundy) 100%) !important;
    border: 2px solid var(--cream) !important;
    color: var(--cream) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 15px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.cart-sidebar-footer .btn-block:hover {
    background: linear-gradient(135deg, var(--deep-burgundy) 0%, var(--burgundy) 100%) !important;
    border-color: var(--warm-beige) !important;
    color: var(--warm-beige) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(139, 38, 53, 0.3) !important;
}

/* Fix for Product Cards in "You Might Also Like" Section */
.recommendation-card,
.suggested-product-card {
    background: linear-gradient(135deg, var(--warm-beige) 0%, var(--cream) 100%) !important;
    border: 2px solid var(--light-cream) !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 25px rgba(139, 38, 53, 0.1) !important;
    transition: all 0.3s ease !important;
}

.recommendation-card:hover,
.suggested-product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 40px rgba(139, 38, 53, 0.2) !important;
    border-color: var(--burgundy) !important;
}

/* Fix for any remaining grey cards */
.card.bg-light,
.card.bg-secondary,
.card.bg-muted {
    background: linear-gradient(145deg, #FFFFFF 0%, var(--warm-beige) 100%) !important;
    border: none !important;
    color: var(--text-color) !important;
}

/* Complete styling for You Might Also Like cards - Match Home Page */
.products-section .product-card {
    border: none !important;
    border-radius: 20px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 8px 25px rgba(139, 38, 53, 0.1) !important;
    background: linear-gradient(145deg, #FFFFFF 0%, var(--warm-beige) 100%) !important;
    overflow: hidden !important;
    position: relative !important;
    height: auto !important;
    min-height: 450px !important;
    display: flex !important;
    flex-direction: column !important;
}

.products-section .product-card:hover {
    transform: translateY(-12px) scale(1.03) !important;
    box-shadow: 0 25px 50px rgba(139, 38, 53, 0.2) !important;
    background: linear-gradient(145deg, #FFFFFF 0%, var(--light-gold) 100%) !important;
}

.products-section .product-card .product-image {
    height: 250px !important;
    overflow: hidden !important;
    border-radius: 20px 20px 0 0 !important;
    cursor: pointer !important;
}

.products-section .product-card .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.products-section .product-card:hover .product-image img {
    transform: scale(1.05) !important;
}

.products-section .product-card .card-body {
    padding: 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%) !important;
}

.products-section .product-card .card-title {
    margin-bottom: 0.25rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--burgundy) !important;
    line-height: 1.3 !important;
}

.products-section .product-card .card-text {
    margin-bottom: 0.5rem !important;
    flex-grow: 1 !important;
    color: var(--text-color) !important;
    opacity: 0.8 !important;
}

.products-section .product-card .price-tag {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--deep-burgundy) 100%) !important;
    color: var(--cream) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    display: inline-block !important;
    box-shadow: 0 4px 12px rgba(139, 38, 53, 0.3) !important;
    margin-bottom: 1rem !important;
}

.products-section .product-card .btn-card {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--deep-burgundy) 100%) !important;
    border: 2px solid var(--cream) !important;
    color: var(--cream) !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.products-section .product-card .btn-card:hover {
    background: linear-gradient(135deg, var(--deep-burgundy) 0%, var(--burgundy) 100%) !important;
    border-color: var(--warm-beige) !important;
    color: var(--warm-beige) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(139, 38, 53, 0.4) !important;
}

/* Wishlist button positioning and styling */
.products-section .product-card .wishlist-toggle {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid var(--burgundy) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--burgundy) !important;
    transition: all 0.3s ease !important;
    z-index: 20 !important;
    font-size: 1rem !important;
}

.products-section .product-card .wishlist-toggle:hover {
    background: var(--burgundy) !important;
    color: white !important;
    transform: scale(1.1) !important;
}

.products-section .product-card .wishlist-toggle.in-wishlist {
    background: var(--burgundy) !important;
    color: white !important;
}

/* Badge styling for discount and free shipping - All product cards */
.products-section .product-card .position-absolute.bg-danger,
.product-card .discount-badge,
.card .position-absolute.bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    border-radius: 0 0 0 15px !important;
    padding: 6px 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    font-size: 0.75rem !important;
    z-index: 10 !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

.products-section .product-card .position-absolute.bg-success,
.product-card .free-shipping-badge,
.card .position-absolute.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border-radius: 0 0 0 15px !important;
    padding: 4px 8px !important;
    font-weight: 600 !important;
    font-size: 0.65rem !important;
    z-index: 9 !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3) !important;
    position: absolute !important;
    top: 35px !important;
    right: 0 !important;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .cart-checkout-btn,
    .checkout-btn,
    .btn-checkout,
    .cart-sidebar-footer .btn {
        padding: 10px 20px !important;
        font-size: 1rem !important;
    }
    
    .cart-sidebar-footer .btn-block {
        padding: 12px !important;
        font-size: 1rem !important;
    }
}

/* Product Detail Page - You Might Also Like Section Specific Fixes */
.recommendations-section,
.you-might-like-section {
    padding: 2rem 0 !important;
}

.recommendations-section .card,
.you-might-like-section .card {
    background: linear-gradient(145deg, #FFFFFF 0%, var(--warm-beige) 100%) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 30px rgba(139, 38, 53, 0.12) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.recommendations-section .card:hover,
.you-might-like-section .card:hover {
    transform: translateY(-12px) scale(1.03) !important;
    box-shadow: 0 25px 50px rgba(139, 38, 53, 0.2) !important;
    background: linear-gradient(145deg, #FFFFFF 0%, var(--light-gold) 100%) !important;
}

.recommendations-section .card-img-top,
.you-might-like-section .card-img-top {
    height: 250px !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
    border-radius: 20px 20px 0 0 !important;
}

.recommendations-section .card:hover .card-img-top,
.you-might-like-section .card:hover .card-img-top {
    transform: scale(1.05) !important;
}

.recommendations-section .card-body,
.you-might-like-section .card-body {
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    flex-grow: 1 !important;
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%) !important;
}

.recommendations-section .card-title,
.you-might-like-section .card-title {
    color: var(--burgundy) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
}

.recommendations-section .card-text,
.you-might-like-section .card-text {
    color: var(--text-color) !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
    flex-grow: 1 !important;
}

.recommendations-section .btn,
.you-might-like-section .btn {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--deep-burgundy) 100%) !important;
    border: 2px solid var(--cream) !important;
    color: var(--cream) !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.recommendations-section .btn:hover,
.you-might-like-section .btn:hover {
    background: linear-gradient(135deg, var(--deep-burgundy) 0%, var(--burgundy) 100%) !important;
    border-color: var(--warm-beige) !important;
    color: var(--warm-beige) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(139, 38, 53, 0.4) !important;
}

/* Additional Fix for Any Bootstrap Override */
.btn:not(.btn-outline-*):not(.btn-link):hover,
.btn:not(.btn-outline-*):not(.btn-link):focus,
.btn:not(.btn-outline-*):not(.btn-link):active {
    color: var(--cream) !important;
}

/* Ensure text never turns black on any buttons */
.btn * {
    color: inherit !important;
}

/* Fix for specific cart page buttons */
.cart-page .btn-primary,
.cart-page .btn-success,
.cart-page .btn-info {
    color: var(--cream) !important;
}

.cart-page .btn-primary:hover,
.cart-page .btn-success:hover,
.cart-page .btn-info:hover {
    color: var(--warm-beige) !important;
}