/* ============================================
   NEW PRODUCT CARD LAYOUT (Advice.co.th Style)
   ============================================ */

/* Main Product Card Container */
.product-card,
.product-card-new,
.card[class*="product"],
[class*="product-card"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-card:hover,
.product-card-new:hover,
.card[class*="product"]:hover,
[class*="product-card"]:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   TOP SECTION - Tags/Badges
   ======================================== */

/* LEGACY CARD - Old product cards (for backward compatibility) */
.product-card:not(.product-card-new) .tags-container,
.product-card:not(.product-card-new) .badge-container,
.product-card:not(.product-card-new) .feature-badges,
.product-card:not(.product-card-new) [class*="badge"],
.card-body:not(.product-card-new) [class*="badge"] {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* NEW CARD - product-card-new (Advice style) - sidebar layout */
.product-card-new .product-badges-sidebar,
.product-card-new .feature-badges-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Individual Tags/Badges - Legacy only */
.product-card:not(.product-card-new) .tag,
.product-card:not(.product-card-new) .badge,
.product-card:not(.product-card-new) .feature-badge,
.product-card:not(.product-card-new) [class*="badge-item"],
.card-body:not(.product-card-new) .badge {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: inline-block !important;
    width: fit-content !important;
    margin: 0 !important;
}

/* AI Badge */
.product-card .badge-ai,
.product-card [class*="ai"],
.product-card .badge:contains("AI") {
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%) !important;
}

/* ICT Badge */
.product-card .badge-ict,
.product-card [class*="ict"],
.product-card .badge:contains("ICT") {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
}

/* Installment Badge */
.product-card .badge-installment,
.product-card .badge-0percent,
.product-card [class*="installment"],
.product-card [class*="percent"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

/* Promo/Special Badge */
.product-card .badge-promo,
.product-card .badge-special,
.product-card .badge-offer {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

/* NEW Badge - Top Right */
.product-card .badge-new,
.product-card .product-badge-top,
.product-card .incoming-badge,
.product-card .new-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    background: #ff3333 !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: white !important;
    z-index: 11 !important;
}

/* ========================================
   IMAGE SECTION
   ======================================== */

.product-card .card-img-top,
.product-card .card-img-top-wrapper,
.product-card .img-container,
.product-card img,
.card-body img[src*="product"],
.card-body img[src*="uploads"] {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    background: #f9fafb !important;
    padding: 12px !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    cursor: pointer !important;
}

/* Image Wrapper Container */
.product-card .image-wrapper,
.product-card .product-image-wrapper {
    flex-shrink: 0 !important;
    height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f9fafb !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hide "ดูรายละเอียด" link/button - ALL variations */
.product-card a.see-details,
.product-card .see-details-link,
.product-card a[href*="detail"],
.product-card button.see-details,
.product-card [class*="details-link"],
.product-card .btn-details,
.image-wrapper a,
.image-wrapper button,
/* Hide text-based overlay */
a[href*="detail"]:not(.category-card__buy-box),
.product-card:not(.product-card-new) a:contains("ดูรายละเอียด"),
/* Hide absolutely positioned overlay */
.product-card [style*="position: absolute"] a,
.product-card [style*="position: absolute"] span:contains("ดูรายละเอียด"),
/* Hide any link/button overlay on image section */
.product-card .card-img-top ~ a,
.product-card img + a,
/* General catch-all for "see details" style buttons */
[class*="see-detail"],
[class*="view-detail"],
[class*="ดูรายละเอียด"] {
    display: none !important;
}

/* ========================================
   PRODUCT INFO SECTION
   ======================================== */

.product-card .card-body,
.product-card .product-info,
.product-card .info-section {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 16px !important;
    gap: 8px !important;
}

/* Promo Text - Orange */
.product-card .promo-text,
.product-card .special-offer,
.product-card .promotional-message,
.product-card [class*="promo"] {
    color: #ff8a50 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin: 0 !important;
}

/* Product Name/Title - Blue */
.product-card .card-title,
.product-card .product-title,
.product-card .product-name,
.product-card h2,
.product-card h3,
.card-body .card-title {
    color: #0066cc !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 4px 0 !important;
    text-align: center !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ========================================
   PRICE SECTION
   ======================================== */

.product-card .price-section,
.product-card .price-container,
.product-card .prices {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 6px 0 !important;
}

/* Original Price - Struck Through */
.product-card .original-price,
.product-card .regular-price,
.product-card .price-original,
.product-card .price-before,
.product-card .old-price {
    color: #9ca3af !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: line-through !important;
    margin: 0 !important;
}

/* Current/Sale Price - Large Blue */
.product-card .sale-price,
.product-card .current-price,
.product-card .price,
.product-card .final-price,
.product-card .deal-price,
.card-body .price {
    color: #00a8ff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 2px 0 !important;
}

/* ========================================
   SPECS/DESCRIPTION SECTION - HIDDEN BY DEFAULT
   ======================================== */

.product-card .specs,
.product-card .specifications,
.product-card .product-specs,
.product-card .description,
.product-card .short-description,
.product-card .details,
.card-body .product-description,
.card-body .card-text {
    display: none !important;
    color: #6b7280 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin: 6px 0 !important;
    text-align: left !important;
}

/* Show on hover */
.product-card:hover .specs,
.product-card:hover .specifications,
.product-card:hover .product-specs,
.product-card:hover .description,
.product-card:hover .short-description,
.product-card:hover .details,
.product-card:hover .product-description,
.product-card:hover .card-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ========================================
   BUTTON SECTION - BOTTOM
   ======================================== */

.product-card .btn-group,
.product-card .button-group,
.product-card .action-buttons {
    display: flex !important;
    gap: 8px !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    padding-top: 8px !important;
}

.product-card .btn,
.product-card button,
.product-card .add-to-cart-btn,
.product-card .buy-btn,
.card-body .btn,
.card-body button {
    flex: 1 !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Primary CTA Button - Blue */
.product-card .btn-primary,
.product-card .cta-primary,
.product-card .buy-now-btn,
.product-card .buy-btn,
.product-card button:not([class*="secondary"]),
.card-body .btn-primary {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
}

.product-card .btn-primary:hover,
.product-card .cta-primary:hover,
.product-card .buy-now-btn:hover,
.product-card .buy-btn:hover,
.card-body .btn-primary:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Secondary Button */
.product-card .btn-secondary,
.product-card .btn-outline {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
}

.product-card .btn-secondary:hover,
.product-card .btn-outline:hover {
    background: #e5e7eb !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet View */
@media (max-width: 768px) {
    .product-card .card-img-top,
    .product-card .card-img-top-wrapper,
    .product-card .img-container,
    .product-card .image-wrapper {
        height: 180px !important;
    }

    .product-card .card-title,
    .product-card .product-title {
        font-size: 12px !important;
    }

    .product-card .sale-price,
    .product-card .current-price {
        font-size: 16px !important;
    }

    .product-card .btn,
    .product-card button {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}

/* Mobile View */
@media (max-width: 480px) {
    .product-card .card-img-top,
    .product-card .card-img-top-wrapper,
    .product-card .img-container,
    .product-card .image-wrapper {
        height: 150px !important;
    }

    .product-card .card-body,
    .product-card .product-info {
        padding: 10px 12px !important;
        gap: 6px !important;
    }

    .product-card .card-title,
    .product-card .product-title {
        font-size: 11px !important;
    }

    .product-card .specs,
    .product-card .specifications {
        font-size: 10px !important;
    }

    .product-card .sale-price,
    .product-card .current-price {
        font-size: 15px !important;
    }

    .product-card .btn,
    .product-card button {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   HIDE CONFLICTING ELEMENTS
   ======================================== */

.product-card i,
.product-card .icon,
.product-card .fa,
.product-card .icon-before::before,
.card-body i::before {
    display: none !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.product-card.featured {
    border: 2px solid #0ea5e9 !important;
}

.product-card.best-seller::after {
    content: "Best Seller" !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: linear-gradient(135deg, #f97316 0%, #d97706 100%) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    z-index: 15 !important;
}