/* ========================================================= */
/* TOOL CARD SYSTEM */
/* ========================================================= */

/* Grids */

.tools-grid,
#tools-results,
.related-tools-grid,
.featured-tools-grid,
.recommended-tools-grid,
#recently-viewed-tools{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important;
    gap:22px !important;
    align-items:stretch !important;
}

/* Swiper card consistency */

.trendingSwiper .swiper-slide,
.home-tools-swiper .swiper-slide{
    height:auto !important;
}

.trendingSwiper .tool-card,
.home-tools-swiper .tool-card{
    height:100% !important;
}

/* Card */

.tool-card{
    position:relative !important;
    width:100% !important;
    min-height:300px !important;
    background:#ffffff !important;
    border:1px solid #e5e7eb !important;
    border-radius:24px !important;
    padding:22px !important;
    box-shadow:0 10px 28px rgba(15,23,42,.06) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    overflow:hidden !important;
    transition:.25s ease !important;
}

.tool-card:hover{
    transform:translateY(-4px) !important;
    box-shadow:0 18px 38px rgba(15,23,42,.09) !important;
}

/* Hide category text from cards */

.tool-card .tool-category,
.tool-card .tool-cat,
.tool-card .tool-taxonomy,
.tool-card .tool-tagline,
.tool-card .tool-subtitle,
.tool-card .tool-meta-category{
    display:none !important;
}

/* Card head */

.tool-card-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin-bottom:14px !important;
    min-height:34px !important;
}

.tool-card-badges{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
}

/* Badges */

.tool-badges-auto{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}

.auto-badge,
.ai-recommendation-badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    padding:6px 12px !important;
    border-radius:999px !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1 !important;
    color:#111827 !important;
    background:#f3f4f6 !important;
    margin:0 !important;
    width:max-content;
}

.auto-badge.top-rated,
.auto-badge.smart-editor{
    background:#fef3c7 !important;
}

.auto-badge.trending,
.auto-badge.smart-growing{
    background:#f3f4f6 !important;
}

.auto-badge.popular,
.auto-badge.smart-rated{
    background:#dcfce7 !important;
}

.auto-badge.smart-free{
    background:#bfdbfe !important;
}

.auto-badge.smart-popular{
    background:#ddd6fe !important;
}

.rec-best{
    background:#fef3c7 !important;
    color:#92400e !important;
}

.rec-popular{
    background:#f3f4f6 !important;
    color:#991b1b !important;
}

.rec-beginner{
    background:#dcfce7 !important;
    color:#166534 !important;
}

.rec-value{
    background:#dbeafe !important;
    color:#1d4ed8 !important;
}

.rec-trusted{
    background:#ede9fe !important;
    color:#6d28d9 !important;
}

/* Diamond */

.tool-diamond,
.tool-card .tool-gem,
.tool-card .diamond-badge,
.tool-card .premium-badge,
.tool-card .badge-diamond,
.tool-card .top-diamond{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    height:auto !important;
    min-width:auto !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
    font-size:16px !important;
    line-height:1 !important;
}

/* Main card top */

.tool-top,
.tool-card .tool-card-top,
.tool-card .tool-main,
.tool-card .tool-content,
.tool-card .tool-body{
    display:flex !important;
    align-items:flex-start !important;
    gap:14px !important;
    margin-bottom:14px !important;
}

/* Logo */

.tool-logo-wrap,
.tool-card .tool-thumb,
.tool-card .tool-image{
    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    border-radius:18px !important;
    border:1px solid #e8edf3 !important;
    background:#ffffff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
}

.tool-card .tool-logo,
.tool-logo-wrap img,
.tool-card .tool-thumb img,
.tool-card .tool-image img{
    width:48px !important;
    height:48px !important;
    object-fit:contain !important;
    display:block !important;
}

/* Info */

.tool-info,
.tool-card .tool-details{
    flex:1 !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
}

/* Title */

.tool-title,
.tool-card .tool-title,
.tool-card .tool-title a,
.tool-card h3,
.tool-card h3 a,
.tool-card h2,
.tool-card h2 a,
.tool-card .tool-name,
.tool-card .tool-name a{
    margin:0 !important;
    color:#111827 !important;
    font-size:16px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    text-decoration:none !important;
}

/* Pricing */

.tool-pricing,
.tool-card .pricing,
.tool-card .badge.pricing,
.tool-card .pricing-badge,
.tool-card .badge-pricing,
.tool-card .tool-price{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:max-content !important;
    max-width:100% !important;
    min-height:28px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    background:#eef2f7 !important;
    color:#1f2937 !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1 !important;
    margin-bottom:8px !important;
}

/* Rating */

.tool-rating,
.tool-card .rating,
.tool-card .rating-text,
.tool-card .tool-reviews{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    font-size:13px !important;
    font-weight:700 !important;
    color:#6b7280 !important;
    margin-top:4px !important;
}

.tool-card .tool-rating .star,
.tool-card .rating-star{
    color:#f4b400 !important;
}

/* Spacer */

.tool-spacer{
    flex:1 !important;
}

/* Actions */

.tool-actions{
    margin-top:18px !important;
}

.tool-top-buttons,
.tool-card .tool-mini-actions,
.tool-card .card-mini-actions,
.tool-card .small-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    border:1px solid #e8edf3 !important;
    border-radius:16px !important;
    overflow:hidden !important;
    margin-top:12px !important;
    margin-bottom:14px !important;
    background:#ffffff !important;
}

/* Compare / Official */

.compare-btn,
.official-btn,
.tool-card .tool-mini-actions a,
.tool-card .card-mini-actions a,
.tool-card .small-actions a{
    min-height:46px !important;
    background:#ffffff !important;
    color:#1f2937 !important;
    border:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-decoration:none !important;
    font-size:13px !important;
    font-weight:800 !important;
    cursor:pointer !important;
    transition:.2s ease !important;
}

.official-btn,
.tool-card .tool-mini-actions a + a,
.tool-card .card-mini-actions a + a,
.tool-card .small-actions a + a{
    border-left:1px solid #e8edf3 !important;
}

.compare-btn:hover,
.official-btn:hover{
    background:#f3f4f6 !important;
}

.compare-btn.active{
    background:#16a34a !important;
    color:#ffffff !important;
}

/* Visit button */

.visit-btn,
.tool-card .visit-tool-btn,
.tool-card .tool-main-btn,
.tool-card .visit-tool-page{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:50px !important;
    border-radius:14px !important;
    background:#000000 !important;
    color:#ffffff !important;
    font-size:14px !important;
    font-weight:800 !important;
    text-decoration:none !important;
    transition:.2s ease !important;
}

.visit-btn:hover,
.tool-card .visit-tool-btn:hover,
.tool-card .tool-main-btn:hover,
.tool-card .visit-tool-page:hover{
    background:#111827 !important;
    color:#ffffff !important;
    transform:translateY(-2px) !important;
}

.visit-text{
    display:flex;
    align-items:center;
    gap:8px;
}

/* Favorite heart */

.favorite-heart{
    position:absolute !important;
    top:18px !important;
    right:18px !important;
    width:26px !important;
    height:26px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
    cursor:pointer !important;
    opacity:0 !important;
    visibility:hidden !important;
    z-index:30 !important;
    transition:.2s ease !important;
    color:transparent !important;
}

.tool-card:hover .favorite-heart{
    opacity:1 !important;
    visibility:visible !important;
}

.favorite-heart::before{
    content:"♡" !important;
    color:#9ca3af !important;
    font-size:26px !important;
    line-height:26px !important;
    font-weight:400 !important;
    display:block !important;
    text-align:center !important;
}

.favorite-heart.active::before{
    content:"♥" !important;
    color:#e11d48 !important;
}

.favorite-heart:hover,
.favorite-heart:focus,
.favorite-heart:active{
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    transform:scale(1.08) !important;
}

/* Prevent image stretching */

.tool-card img,
.related-tools-section img,
.users-viewed-section img{
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
}

/* Users also viewed container */

.users-viewed-section #recently-viewed-tools{
    min-height:0 !important;
}

/* Mobile */

@media(max-width:768px){

    .tools-grid,
    #tools-results,
    .related-tools-grid,
    .featured-tools-grid,
    .recommended-tools-grid,
    #recently-viewed-tools{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .tool-card{
        min-height:auto !important;
        padding:18px !important;
        border-radius:22px !important;
    }

    .tool-top,
    .tool-card .tool-card-top,
    .tool-card .tool-main,
    .tool-card .tool-content,
    .tool-card .tool-body{
        gap:14px !important;
    }

    .tool-logo-wrap,
    .tool-card .tool-thumb,
    .tool-card .tool-image{
        width:66px !important;
        height:66px !important;
        min-width:66px !important;
        border-radius:16px !important;
    }

    .tool-card .tool-logo,
    .tool-logo-wrap img,
    .tool-card .tool-thumb img,
    .tool-card .tool-image img{
        width:44px !important;
        height:44px !important;
    }

    .tool-title,
    .tool-card .tool-title,
    .tool-card .tool-title a,
    .tool-card h3,
    .tool-card h3 a,
    .tool-card h2,
    .tool-card h2 a,
    .tool-card .tool-name,
    .tool-card .tool-name a{
        font-size:15px !important;
    }

    .compare-btn,
    .official-btn{
        min-height:44px !important;
        font-size:12px !important;
    }

    .visit-btn{
        min-height:48px !important;
    }
}

@media(hover:none){

    .favorite-heart{
        opacity:1 !important;
        visibility:visible !important;
    }
}