/* ========================================= */
/* 1. GRID LAYOUT: 4 COLUMNS RESPONSIVE */
/* ========================================= */

/* General Container Adjustment for Dark Mode Context */
/* NOTE: The main page background must be set outside of this component */
code{
	background-color:red !important;
color:white !important;
}
.icon-platform{
  filter: brightness(0) invert(1) grayscale(100%) brightness(1.5);
}  
.ai-tools-grid {
    display: grid;
    /* Default: 1 column on very small screens */
    grid-template-columns: repeat(1, 1fr); 
    gap: 20px;
    padding: 20px 0;
}

/* Tablets (>= 600px) */
@media (min-width: 600px) {
    .ai-tools-grid {
        /* 2 columns for tablets */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium Desktops (>= 992px) */
@media (min-width: 992px) {
    .ai-tools-grid {
        /* 3 columns for medium screens */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large Desktops (>= 1200px) */
@media (min-width: 1200px) {
    .ai-tools-grid {
        /* 4 columns for large screens */
        grid-template-columns: repeat(4, 1fr);
    }
}

 
/* ========================================= */
/* 2. CARD & ICON STYLING (DARK MODE) */
/* ========================================= */

.ai-tool-card {
    /* DARK MODE BACKGROUND */
    background-color: #1d1d1d; 
	position: relative;
    border: 1px solid #333333; /* Darker border */
    color: #f0f0f0; /* Light text color */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s;
/* 	padding-right: 0; */
}

.ai-tool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
}

/* .card-header-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px 0;
    font-size: 0.85em;
} */

/* --- PROMOTED FLAG STYLING --- */

.card-header-list {
    /* Ensure there is space for the flag */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Align header items to the top */
    padding: 10px 15px 0;
	font-size: 0.85em;
	position: relative;
}

.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.promoted-flag {
    /* Style for the "TOP" badge */
    background-color: #ff4601; /* Use the primary orange color */
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px; /* Space between flag and categories */
    letter-spacing: 0.5px;
}

/* Ensure category tags are displayed correctly below the flag */
.header-left .category-tags {
    margin-top: 0;
}

.header-right {
    /* Ensures items inside align vertically (like the rating badge) */
    display: flex; 
    align-items: center; 
    gap: 10px; /* Provides space between elements if you add more to the right */
}
/* --- RIBBON STYLING (Based on your provided CSS) --- */

 .ribbon-best {
     
    z-index: 15;  
   	border-radius: 5px;  
    width: 80px; 
    color: #000;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 17px;
    text-transform: uppercase;
   	padding: 3px 8px; 
    box-shadow: rgb(255 255 255 / 19%) 0 0px 17px;
    background: linear-gradient(135deg, #d3ff01 25%, #09d1ff);
} 
 
.rating-badge {
    background-color: #fdd835;
    color: #1d1d1d; /* Keep text dark for contrast on yellow */
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
	font-size:12px;
    display: flex;
    align-items: center;
}

.rating-badge .star {
    margin-left: 3px;
    color: #1d1d1d;
}
.card-content {
    padding: 15px;
    flex-grow: 1;
}

/* --- LOGO AND NAME SIDE-BY-SIDE LAYOUT --- */
.logo-name-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.logo-container {
    height: 35px; /* Smaller logo in line with text */
    width: 35px;
    margin-right: 10px;
    flex-shrink: 0; /* Prevents logo from shrinking */
}

.logo-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.tool-name {
    font-size: 1.25em;
    font-weight: 700;
    margin: 0; 
    display: flex; 
    align-items: center;
    line-height: 1.2;
	color:white;
}

/* Verified Icon Styling */
.verified-icon {
    width: 18px; 
    height: 18px;
    margin-left: 5px;
    vertical-align: middle;
}

.short-description {
    font-size: 0.9em;
    color: #b0b0b0; /* Lighter gray for dark background */
    margin-bottom: 10px;
}

.pricing-info {
    font-size: 0.7em;
    font-weight: normal bold;
    color: #ff9b01; /* Highlight with button color */
    margin: 5px 0;
}


/* =================================================================
   ⭐ NEW/UPDATED: TAGS AND VIEW COUNT ROW
   ================================================================= */

/* 1. New container to hold tags and view count side-by-side */
.card-content .card-meta-row {
    display: flex;
    justify-content: space-between; /* Pushes content to the edges */
    align-items: center;
    margin-top: 10px; 
    padding-bottom: 5px; /* Small space below this section */
}

/* 2. Existing Tags styling */
.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0; /* Removing old top margin, controlled by .card-meta-row now */
    flex-shrink: 1; 
    margin-right: 15px; /* Adds space between tags and view count */
}

.tag-link {
    background-color: #2b2b2b; /* Dark tag background */
    color: #cccccc;
	font-size: 0.668em !important;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
}

/* 3. Styling for the Total View Count */
 .card-view-count {
    /* ⚡ NEW: Absolute Positioning */
    position: absolute; 
    top: -22px; /* Adjust this value to set height above the buttons */
    right: 15px; /* Aligns with the right padding of the footer */
    
    /* Display/Style properties */
    display: flex;
    align-items: center;
    font-size: 0.85em;
    color: #9ca3af; 
    
    /* Give it a slightly higher stacking order */
    z-index: 10; 
	 opacity: .5;
}

.card-view-count .view-icon {
    line-height: 1;
    font-size: 1.1em;
	font-size: 10px;
}

/* Cleanup for the previous layout if it still exists */
.card-content .card-meta-row {
    /* Keep this for the tags, but remove the flex-related margin adjustments */
    display: flex;
    justify-content: flex-start; /* Ensure tags start on the left */
    align-items: center;
    margin-top: 10px; 
    padding-bottom: 5px; 
}

/* --- UPDATED FOOTER AND BUTTON LAYOUT --- */

.card-footer-buttons {
    padding: 15px;
    border-top: 1px solid #333333;
    margin-top: auto; 
    display: flex;
    gap: 10px; 
	font-size:0.8em;
    /* ⚡ NEW: Set reference point for absolute children */
    position: relative; 
    /* NEW: Add padding-top to make room for the floating counter */
}

/* Base style for both buttons */
.card-button { /* Use the general class 'card-button' for shared styles */
    display: block;
    width: 50%; /* Each button takes up half the width */
    padding: 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* 1. VISIT WEBSITE BUTTON (Primary Orange) */
.visit-btn {
    background-color: #942800; 
    color: #fff;
    border: 2px solid #ff4601;
}

.visit-btn:hover {
    color: #fff;
    background-color: #ac3205; 
    border-color: #e03b00;
}

/* 2. SHOW DETAIL BUTTON (Secondary Dark Mode Style) */
.detail-btn {
    background-color: transparent; /* Transparent background */
    color: #ff4601; /* Orange text */
    border: 2px solid #3a3a3a; /* Dark gray border */
}

.detail-btn:hover {
    background-color: #2b2b2b; /* Slightly lighter gray on hover */
    color: #fff;
    border-color: #ff4601; /* Orange border on hover */
}
/* --- Ensure the rest of your CSS remains the same: --- */

/* ... (Keep the rest of your CSS, including .ai-tool-card, .ribbon-best, 
    .logo-name-wrapper, .verified-icon, etc.) ... */

/* Load More Button Styling */
.load-more-wrapper {
    text-align: center;
    margin-top: 30px;
}

.load-more-btn {
    padding: 10px 20px;
    background-color: #2b2b2b;
    color: #ff4601;
    border: 2px solid #ff4601;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}

.load-more-btn:hover {
    background-color: #ff4601;
    color: #fff;
}

.tool-item .click-count-wrapper {
    /* Position the click count/eye icon before the meta-icon/external link icon */
    font-size: 0.8rem;
    color: #9ca3af; /* Gray text */
    margin-left: auto; /* Push it to the far right before the last icons */
    margin-right: 10px; 
/*     display: flex; /* Align the icon and number */ */
    align-items: center;
	opacity: .6;
}

.tool-item .eye-icon {
    /* Small adjustment to align the emoji/icon */
    line-height: 1;
}

.tool-item .click-count {
    margin-left: 2px;
}

.tool-link.promoted-effect {
    /* Required for gradient text effect */
    display: inline-block;
    position: relative; 
	
    /* Set up the gradient background */
	background: linear-gradient(
        90deg, 
        #FFD700 0%,     /* Gold */
        #000000 20%,    /* Black */
        #FFA500 40%,    /* Orange-Gold */
        #FFD700 60%,    /* Gold */
        #000000 80%,    /* Black */
        #FFA500 100%    /* Orange-Gold */
    );
    background-size: 200% 100%; /* Make the gradient wider than the text */
    
    /* Crucial for making the gradient fill the text */
    -webkit-background-clip: text; /* For Webkit browsers */
    background-clip: text;
    color: transparent; /* Hide the original text color to show the gradient */
    
    /* Apply the animation */
    animation: gold-black-shine 4s ease-in-out infinite;
    
}

@keyframes gold-black-shine {
    0% {
        background-position: -200% 0; /* Start gradient even further left */
    }
    100% {
        background-position: 200% 0; /* Move gradient across the text and beyond */
    }
}

/* Ensure the text is on top of any background for readability if needed (usually transparent takes care of this) */
.tool-link.promoted-effect span {
    position: relative;
    z-index: 2;
}


/* --- CSS for Verified Badge Position --- */
.tool-logo-wrapper {
    position: relative; /* Establish context for absolute positioning */
    display: inline-block;
    margin-right: 2px; /* Adjust spacing between logo and tool name */
    line-height: 1; /* Keep everything aligned */
}

.verified-badge {
    position: absolute;
    bottom: -2px; /* Adjust to sit just below the logo */
    right: 6px; /* Adjust to sit to the right of the logo */
    width: 9px; /* Ensure icon is small and crisp */
    height: 9px;
    z-index: 10;
    border-radius: 50%; /* Optional: If the icon image is a square and you want a circular badge look */
    /* Add a small white border for visibility if needed: border: 1px solid white; */
}

/* --- CSS for Tooltip Display --- */
.tool-link.tooltip-trigger {
    /* CRITICAL: Must be relative to position the tooltip absolutely inside it */
    position: relative; 
    display: inline-block; 
}
.tool-link.tooltip-trigger[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 50;
    
    /* Positioning relative to the .tool-link element: */
    left: 0;    /* ⭐ Starts directly under the left edge of the link text */
    top: 100%;  /* ⭐ Positioned immediately below the link text */
    transform: translateY(5px); /* ⭐ Adds a small 5px vertical gap below the text */
    
    /* Styling for the tooltip box */
    background: #333; 
    color: #fff;     
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: normal; 
    width: 250px; 
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Hide the tooltip initially */
.tool-link.tooltip-trigger:after {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the tooltip on hover */
.tool-link.tooltip-trigger[data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
}



/* ========================================= */
/* TOOLTIP STYLING FOR VERIFIED ICON */
/* ========================================= */

.verified-tooltip-container {
    position: relative;
    display: inline-block; /* Essential to wrap only the icon */
    cursor: help; /* Change cursor to indicate interactivity */
}

/* Tooltip Text/Box Style */
.verified-tooltip-container::before,
.verified-tooltip-container::after {
    --arrow-size: 6px;
    --tooltip-bg: #ffffff; /* Requested white background */
    --tooltip-color: #333333; /* Dark text for contrast */
    
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 100; /* Ensure it floats above all card elements */
    left: 50%; /* Center relative to the icon */
    transform: translate(-50%, 5px); /* Initial position (shifted down) */
}

/* Tooltip Box Content */
.verified-tooltip-container::before {
    content: attr(data-tooltip); /* Pull content from the PHP data attribute */
    top: calc(100% + var(--arrow-size)); /* Position below the icon, leaving space for the arrow */
    
    /* Box Styling */
    background-color: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for dark mode contrast */
    white-space: wrap; /* Prevent text wrapping */
    font-size: 0.6em;
    font-weight: 500;
	text-align:center; 
}

/* Tooltip Arrow */
.verified-tooltip-container::after {
    content: '';
    top: calc(100%); /* Position arrow just below the icon */
    width: 0;
    height: 0;
    border-left: var(--arrow-size) solid transparent;
    border-right: var(--arrow-size) solid transparent;
    border-bottom: var(--arrow-size) solid var(--tooltip-bg); /* Use white background for the arrow */
}

/* Hover State: Show Tooltip */
.verified-tooltip-container:hover::before,
.verified-tooltip-container:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0); /* Move into final position (no vertical shift) */
}

/* LIST OF AI TOOLS PER CATEGORY */

/* ------------------------------------------- */
/* 1. Desktop Grid Layout (4 Columns)          */
/* ------------------------------------------- */
.ai-tools-wrapper {
    display: grid;
    /* Create responsive columns that wrap */
    grid-template-columns: repeat(4, 300px);
    gap: 20px;
    padding: 20px 0;
    max-width: 1280px; /* Optional: Sets max width for the entire section */
    margin: 0 auto;
}

.ai-tools-wrapper-single{
	 display: grid;
    /* Create responsive columns that wrap */
/*     grid-template-columns: repeat(4, 300px); */
    gap: 20px;
    padding: 20px 0;
    max-width: 1280px; /* Optional: Sets max width for the entire section */
    margin: 0 auto;
}
 
.category-card {
    /* KEY: Flexbox for sticky bottom button */
    display: flex;
    flex-direction: column; 
    
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
    border: 1px solid #eee;
    height: 100%; /* Ensures all cards stretch to the grid row height */
}

/* ------------------------------------------- */
/* 2. Header and Line Dividers                 */
/* ------------------------------------------- */
.card-header {
    padding-bottom: 15px;
    margin-bottom: 5px;
}

.card-title-block {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.category-icon {
    width: 21px;
    height: 21px;
    margin-right: 8px;
    filter:invert(100%);
}

.card-title-block h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #333;
}

.line-divider {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    /* Base style for the gradient overlay */
    opacity: 0.8;
   background: linear-gradient(to right, #FF7043, #FFCA28);
}
 
/* ------------------------------------------- */
/* 3. List Item Styling                        */
/* ------------------------------------------- */
.tool-list {
    list-style: none; 
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Key: Pushes the button to the bottom */
}

.tool-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0; 
}

.tool-item:last-of-type {
    border-bottom: none;
}

.tool-rank {
    font-weight: 500;
    color: #777;
    width: 15px; /* Fixed width for consistent alignment */
    text-align: left;
    margin-right: 5px;
}

.tool-logo-small {
    width: 19px;
    height: 19px;
    margin-right: 8px;
    border-radius: 4px;
}

.tool-link {
    flex-grow: 1;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.meta-icon {
    font-size: 12px;
    color: #ffc107; /* Gold/Yellow for the $ or star icons */
    margin: 0 5px;
}

.external-icon {
    color: #ccc;
    font-size: 16px;
    margin-left: auto; /* Pushes the icon to the far right */
}

.external-icon:hover{
  color: #2872fa;
}

.icon-hover{
   color: #2872fa;
}

/* ------------------------------------------- */
/* 4. Button Styling (Always Fixed at Bottom)  */
/* ------------------------------------------- */
.see-all-button {
    margin-top: auto; /* KEY: Pushes the button down */
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #777;
    font-size: 14px;
    font-weight: 500;
    background-color: #f7f7f7;
    border-radius: 0 0 12px 12px;
    /* Ensure the button visually attaches to the bottom */
    margin-left: -20px;
    width: calc(100% + 40px); /* Adjust width to cover the card padding */
}

.see-all-button:hover {
    background-color: #eee;
    color: #333;
}


/* ------------------------------------------- */
/* 5. Responsiveness (Adjusted for Fixed Width)*/
/* ------------------------------------------- */

@media (max-width: 1279px) {
    /* When there isn't enough room for 4 fixed columns, drop to auto-fit for 3 */
    .ai-tools-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: 960px; /* 3*300px + 2*20px gap = 940px (for 3 columns) */
    }
	.ai-tools-wrapper-single {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: 960px; /* 3*300px + 2*20px gap = 940px (for 3 columns) */
    }
}

@media (max-width: 980px) {
    /* Tablet View: Switch to 2 columns */
    .ai-tools-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: 640px; /* 2*300px + 1*20px gap = 620px (for 2 columns) */
    }
	.ai-tools-wrapper-single {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: 640px; /* 2*300px + 1*20px gap = 620px (for 2 columns) */
    }
}

@media (max-width: 660px) {
    /* Mobile View: Switch to 1 column and allow it to expand to fill the screen */
    .ai-tools-wrapper {
        grid-template-columns: 1fr;
        max-width: 100%; /* Use full width on mobile */
        padding: 10px;
    }
	.ai-tools-wrapper-single {
		grid-template-columns: 1fr;
        max-width: 100%; /* Use full width on mobile */
        padding: 10px;
    }
    
    .category-card {
        margin-bottom: 15px;
    }
}