/**
 * Theme Name:     Durqo Child Theme
 * Author:         EngnAI
 * Template:       woodmart
 * Text Domain:	   durqo
 * Description:    Customized WoodMart Durqo Based on ThemeForest Premium Theme
 */

/* =========================================
   Modern Product Card Styles (Compact & Enhanced)
   ========================================= */

/* Design Tokens */
:root {
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --text-main: #0f172a;
    /* Slate 900 - Darker/sharper */
    --text-dim: #64748b;
    /* Slate 500 */
    --text-label: #475569;
    /* Slate 600 - More visible label */
    --text-accent: #10B981;
    /* Sharper Green */

    --bg-surface: #f1f5f9;
    /* Slate 100 - Better contrast against white */
}

.modern-listing-card {
    background: #F8FAFC;
    /* Soft slate - matches bento box backgrounds */
    border-radius: 16px;
    /* Slightly reduced radius */
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 24px;
    /* Reduced margin */
    border: 1px solid var(--card-border);
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.modern-listing-card:hover {
    transform: translateY(-2px);
    /* Subtle lift */
    box-shadow: var(--card-shadow-hover);
    border-color: #cbd5e1;
}

.modern-card-content {
    display: flex;
    gap: 24px;
    /* Reduced gap */
    padding: 20px;
    /* Reduced padding */
    align-items: stretch;
}

/* Image Wrapper */
.modern-card-image-wrapper {
    flex: 0 0 240px;
    /* Reduced width */
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--card-border);
}

.modern-card-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    min-height: 180px;
    /* Shorter image area */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
}

.modern-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    padding: 12px;
    transition: transform 0.5s ease;
}

.modern-card-image:hover img {
    transform: scale(1.05);
    /* Subtle zoom */
}

.verified-badge-modern {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Middle Content */
.modern-card-middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    /* Tighter spacing */
}

.modern-card-title {
    font-size: 18px;
    /* Compact title */
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-main);
    line-height: 1.3;
    text-align: center;
}

.modern-card-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.15s;
}

.modern-card-title a:hover {
    color: var(--text-accent);
}

.modern-card-description {
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px 0;
    /* Reduced from 16px */
    text-align: center;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stats */
/* Stats */
/* Stats - Soft Bento Grid */
/* Stats - Soft Bento Grid */
.modern-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns now */
    gap: 10px;
    /* Reduced from 12px for density */
    width: 100%;
    margin-bottom: 12px;
    /* Reduced from 16px */
}

.modern-stat-box {
    background: #FFFFFF;
    padding: 16px 10px;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-stat-box:hover {
    background: #b4fae3;
    border-color: var(--text-accent);
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.modern-stat-box.full-width {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 14px 16px;
    gap: 8px;
    background: #FFFFFF;
}

.modern-stat-box.full-width:hover {
    transform: none;
    box-shadow: none;
    border-color: #E2E8F0;
    gap: 8px;
    background: #FFFFFF;
}


.modern-stat-box.full-width .modern-stat-details {
    width: 100%;
}

/* Icons */
/* Icons */
/* Icons - Floating */
.modern-stat-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    /* Soft square/squircle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.modern-stat-box.full-width .modern-stat-icon {
    display: none;
    /* Hide icon for monetization to focus on pills */
}

.modern-stat-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Icon Colors - applied to SVG fill via class if needed, or keeping background logic */
/* Overriding previous backgrounds to be transparent or white wrapper with colored icon?
   Let's keep the colored backgrounds but use specific classes on SVG or Wrapper if simplest.
   Actually, the plan said "White icon bg on bento card", so let's use color on the ICON/SVG itself. */
.icon-type {
    color: #0284C7;
    background: #FFFFFF;
}

.icon-age {
    color: #9333EA;
    background: #FFFFFF;
}

.icon-monetization {
    color: #D97706;
    background: #FFFFFF;
}

.icon-income {
    color: #16A34A;
    background: #FFFFFF;
}

.icon-multiple {
    color: #E11D48;
    background: #FFFFFF;
}

.icon-price {
    color: #0D9488;
    background: #FFFFFF;
}

/* Icon Colors - Soft Pastels */
.icon-type {
    background: #E0F2FE;
    color: #0284C7;
}

.icon-age {
    background: #F3E8FF;
    color: #9333EA;
}

.icon-monetization {
    background: #FEF3C7;
    color: #D97706;
}

.icon-income {
    background: #DCFCE7;
    color: #16A34A;
}

.icon-multiple {
    background: #FFE4E6;
    color: #E11D48;
}

.icon-price {
    background: #CCFBF1;
    color: #0D9488;
}

/* Teal */

.modern-stat-details {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    width: 100%;
}

.modern-stat-label {
    display: block;
    font-size: 9px;
    /* Smaller label */
    text-transform: uppercase;
    color: var(--text-label);
    font-weight: 700;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.modern-stat-value {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
    word-break: break-word;
    /* Break long words */
    overflow-wrap: break-word;
    /* Fallback for older browsers */
}

/* Monetization Pills */
.monetization-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    /* Space from label */
    max-width: 100%;
    overflow: hidden;
}

.monetization-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    /* Full pill */
    font-size: 11px;
    color: #475569;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.monetization-pill:hover {
    border-color: var(--text-accent);
    color: var(--text-accent);
    transform: translateY(-1px);
}

.monetization-show-more-pill {
    background: #F1F5F9;
    color: var(--text-accent);
    font-weight: 600;
    cursor: pointer;
    border: 1px dashed #CBD5E1;
}

.monetization-show-more-pill:hover {
    background: #FFFFFF;
    border-color: var(--text-accent);
}

/* Hidden monetization pills */
.monetization-hidden-content {
    display: none;
    /* Hide by default */
}

.monetization-hidden-content.show {
    display: inline;
    /* Show when toggled */
}

/* Centered Price - Floating Minimal */
.modern-price-box {
    margin-top: 16px;
    text-align: center;
    padding-top: 16px;
    border-top: 1px dashed #E2E8F0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.modern-price-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #94A3B8;
    font-weight: 700;
    letter-spacing: 1px;
}

.modern-price-value {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -1px;
}

/* Sidebar / Right Column */
.modern-card-sidebar {
    flex: 0 0 220px;
    padding-left: 20px;
    border-left: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.modern-trend-section {
    width: 100%;
}

.modern-trend-header {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}

.modern-chart-wrapper {
    background-color: transparent;
}

/* Action Buttons - Modern Polish */
.modern-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modern-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 10px;
    /* Modern rounding */
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.modern-btn-primary {
    background: var(--text-accent);
    background: linear-gradient(135deg, #10B981, #059669);
    /* Gradient */
    color: white;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2), 0 2px 4px -1px rgba(16, 185, 129, 0.1);
}

.modern-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3), 0 4px 6px -2px rgba(16, 185, 129, 0.1);
    filter: brightness(1.05);
}

.modern-btn-secondary {
    background: white;
    color: #475569;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.modern-btn-secondary:hover {
    border-color: #CBD5E1;
    color: var(--text-accent);
    background: #F8FAFC;
    transform: translateY(-1px);
}

.modern-trend-icon {
    font-size: 12px;
}

/* =========================================
   Responsive Breakpoints
   ========================================= */

@media screen and (max-width: 991px) {
    .modern-card-content {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .modern-card-image-wrapper {
        flex: 0 0 auto;
        height: 220px;
        width: 100%;
    }

    .modern-card-sidebar {
        flex: 0 0 auto;
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--card-border);
        padding-left: 0;
        padding-top: 20px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .modern-trend-section {
        flex: 1 1 240px;
    }

    .modern-action-buttons {
        flex: 1 1 240px;
    }
}

@media screen and (max-width: 576px) {
    .modern-card-title {
        font-size: 18px;
    }

    /* Grid changes for mobile - keep 2 cols on small screens */
    .modern-stats-row {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cols on mobile for readability */
        gap: 10px;
    }

    /* Full width items on mobile */
    .modern-stat-box.full-width {
        grid-column: 1 / -1;
        /* Span all columns */
    }

    .modern-card-sidebar {
        flex-direction: column;
    }

    .modern-btn {
        padding: 12px;
    }
}

/* =========================================
   Quick Stats Section (Product Details)
   ========================================= */

.quick-stats-section {
    margin: 20px 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.quick-stats-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
    margin-top: 0;
}

.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.quick-stat-card {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.quick-stat-card:hover {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.quick-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #d1fae5;
    color: #10b981;
    border-radius: 10px;
    margin-right: 15px;
    flex-shrink: 0;
}

.quick-stat-icon svg {
    width: 24px;
    height: 24px;
}

.quick-stat-content {
    display: flex;
    flex-direction: column;
}

.quick-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.quick-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.quick-stat-value .woocommerce-Price-amount {
    color: #0f172a;
}



@media screen and (max-width: 576px) {
    .quick-stats-grid {
        grid-template-columns: 1fr;
    }
}


/* Fix for Listing Data Section Visibility */

/* Update: Fix for Listing Data Section Visibility */
.listing-data-section,
.listing-data-section li,
.listing-data-section span,
.listing-data-section bdi,
.listing-data-section time,
.listing-data-section strong,
.listing-data-section .woocommerce-Price-amount,
.listing-data-section .woocommerce-Price-currencySymbol,
.listing-data-section .amount,
.listing-data-section ins,
.listing-data-section ins span,
.listing-data-section ins bdi {
   color: #333 !important;
   text-shadow: none !important;
   opacity: 1 !important;
   visibility: visible !important;
}

.listing-data-section del,
.listing-data-section del .woocommerce-Price-amount,
.listing-data-section del bdi,
.listing-data-section del span {
    color: #aaa !important; /* Lighter for original price in range */
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}

/* Ensure icons keep their green color */
.listing-data-section li > span:first-child {
    color: #2DC799 !important;
}
.listing-data-section li strong {
    color: #333 !important; 
}

/* =========================================
   Product Card Width Lock – FINAL FIX
   Prevents cards from shrinking regardless of content
   ========================================= */

/* Force fixed-width grid columns */
ul.products,
.dokan-product-listing .products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 320px)) !important;
    justify-content: center !important;
    gap: 24px !important;
    margin: 0 0 40px 0 !important;
}

/* Ensure each product fills the grid cell */
ul.products .product,
.dokan-product-listing .product {
    width: 100% !important;
    min-width: 320px !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    align-self: stretch !important;
    box-sizing: border-box;
}

/* Fix inner modern card shrink issue */
.modern-listing-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
}

/* Ensure media/content doesn't control width */
.modern-listing-card img {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
}

/* Mobile: single column */
@media screen and (max-width: 576px) {
    ul.products,
    .dokan-product-listing .products {
        grid-template-columns: 1fr !important;
    }

    ul.products .product,
    .dokan-product-listing .product {
        min-width: 100% !important;
        max-width: 100% !important;
    }
}