/* Business Directory Card Colors - Easy Customization File
 * 
 * This file contains CSS variables for all card colors in the Business Directory Plugin.
 * Simply change the values here to customize the appearance of your business cards.
 * 
 * How to use:
 * 1. Include this CSS file after the main business directory CSS
 * 2. Change any color values below to match your desired theme
 * 3. All changes will automatically apply to your business cards
 */

:root {
    /* ==== BUSINESS CARD COLORS ==== */
    
    /* Card Background & Border */
    --bd-card-bg: #ffffff;                    /* Card background color */
    --bd-card-border: #e2e8f0;               /* Card border color */
    --bd-card-hover-border: #667eea;         /* Card border color on hover */
    
    /* Card Shadows */
    --bd-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --bd-card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    /* Card Header (Image Area) */
    --bd-card-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Card Content Text Colors */
    --bd-card-title-color: #2d3748;          /* Business name color */
    --bd-card-title-hover: #667eea;          /* Business name color on hover */
    --bd-card-tagline-color: #718096;        /* Tagline/subtitle color */
    --bd-card-text-color: #4a5568;           /* General text color */
    
    /* Category Tags */
    --bd-category-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bd-category-color: #ffffff;            /* Category tag text color */
    
    /* Rating Stars */
    --bd-star-filled: #ffd700;               /* Filled star color */
    --bd-star-empty: #e2e8f0;                /* Empty star color */
    --bd-rating-text: #718096;               /* Rating text color */
    
    /* Contact Information */
    --bd-contact-icon: #667eea;              /* Contact icon color */
    --bd-contact-text: #4a5568;              /* Contact text color */
    
    /* Social Media Icons */
    --bd-social-phone: #4285f4;              /* Phone icon background */
    --bd-social-email: #ea4335;              /* Email icon background */
    --bd-social-website: #34a853;            /* Website icon background */
    --bd-social-default: #6b7280;            /* Default social icon color */
    
    /* Card Footer */
    --bd-footer-bg: #f8fafc;                 /* Footer background */
    --bd-footer-border: #e2e8f0;             /* Footer border color */
    
    /* Buttons */
    --bd-button-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bd-button-hover: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    --bd-button-color: #ffffff;              /* Button text color */
    
    /* Status Badges */
    --bd-badge-featured-bg: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    --bd-badge-featured-color: #333333;      /* Featured badge text */
    --bd-badge-verified-bg: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    
    /* Favorite Button */
    --bd-favorite-bg: rgba(255, 255, 255, 0.9);
    --bd-favorite-color: #dc3545;
    --bd-favorite-hover: #dc3545;
    
    /* Hover Effects */
    --bd-card-hover-transform: translateY(-4px);  /* Card lift effect on hover */
    
    /* Card Top Border */
    --bd-card-top-border: linear-gradient(90deg, #667eea, #764ba2);
}

/* ==== PREDEFINED COLOR SCHEMES ==== */

/* Uncomment one of the sections below to apply a predefined color scheme */

/* BLUE THEME */
/*
:root {
    --bd-card-bg: #f8faff;
    --bd-card-border: #dbeafe;
    --bd-card-hover-border: #3b82f6;
    --bd-card-header-bg: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --bd-category-bg: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --bd-contact-icon: #3b82f6;
    --bd-button-bg: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --bd-button-hover: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    --bd-card-top-border: linear-gradient(90deg, #3b82f6, #1d4ed8);
}
*/

/* GREEN THEME */
/*
:root {
    --bd-card-bg: #f0fdf4;
    --bd-card-border: #dcfce7;
    --bd-card-hover-border: #16a34a;
    --bd-card-header-bg: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    --bd-category-bg: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    --bd-contact-icon: #16a34a;
    --bd-button-bg: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    --bd-button-hover: linear-gradient(135deg, #15803d 0%, #166534 100%);
    --bd-card-top-border: linear-gradient(90deg, #16a34a, #15803d);
}
*/

/* RED THEME */
/*
:root {
    --bd-card-bg: #fef2f2;
    --bd-card-border: #fecaca;
    --bd-card-hover-border: #dc2626;
    --bd-card-header-bg: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --bd-category-bg: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --bd-contact-icon: #dc2626;
    --bd-button-bg: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --bd-button-hover: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    --bd-card-top-border: linear-gradient(90deg, #dc2626, #b91c1c);
}
*/

/* PURPLE THEME */
/*
:root {
    --bd-card-bg: #faf5ff;
    --bd-card-border: #e9d5ff;
    --bd-card-hover-border: #9333ea;
    --bd-card-header-bg: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    --bd-category-bg: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    --bd-contact-icon: #9333ea;
    --bd-button-bg: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    --bd-button-hover: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    --bd-card-top-border: linear-gradient(90deg, #9333ea, #7c3aed);
}
*/

/* ORANGE THEME */
/*
:root {
    --bd-card-bg: #fff7ed;
    --bd-card-border: #fed7aa;
    --bd-card-hover-border: #ea580c;
    --bd-card-header-bg: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    --bd-category-bg: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    --bd-contact-icon: #ea580c;
    --bd-button-bg: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    --bd-button-hover: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
    --bd-card-top-border: linear-gradient(90deg, #ea580c, #c2410c);
}
*/

/* DARK THEME */
/*
:root {
    --bd-card-bg: #1f2937;
    --bd-card-border: #374151;
    --bd-card-hover-border: #60a5fa;
    --bd-card-header-bg: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    --bd-card-title-color: #f9fafb;
    --bd-card-tagline-color: #d1d5db;
    --bd-card-text-color: #e5e7eb;
    --bd-category-bg: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    --bd-contact-icon: #60a5fa;
    --bd-contact-text: #e5e7eb;
    --bd-footer-bg: #111827;
    --bd-footer-border: #374151;
    --bd-button-bg: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    --bd-button-hover: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --bd-card-top-border: linear-gradient(90deg, #60a5fa, #3b82f6);
}
*/

/* ==== CUSTOM CARD STYLING ==== */

/* Apply the variables to the business cards */
.business-directory-container .business-card {
    background: var(--bd-card-bg) !important;
    border: 1px solid var(--bd-card-border) !important;
    box-shadow: var(--bd-card-shadow) !important;
}

.business-directory-container .business-card:hover {
    box-shadow: var(--bd-card-shadow-hover) !important;
    border-color: var(--bd-card-hover-border) !important;
    transform: var(--bd-card-hover-transform) !important;
}

.business-directory-container .card-header {
    background: var(--bd-card-header-bg) !important;
}

.business-directory-container .business-title a {
    color: var(--bd-card-title-color) !important;
}

.business-directory-container .business-title a:hover {
    color: var(--bd-card-title-hover) !important;
}

.business-directory-container .business-tagline {
    color: var(--bd-card-tagline-color) !important;
}

.business-directory-container .category-tag {
    background: var(--bd-category-bg) !important;
    color: var(--bd-category-color) !important;
}

.business-directory-container .star-filled {
    color: var(--bd-star-filled) !important;
}

.business-directory-container .star-empty {
    color: var(--bd-star-empty) !important;
}

.business-directory-container .rating-text {
    color: var(--bd-rating-text) !important;
}

.business-directory-container .contact-item i {
    color: var(--bd-contact-icon) !important;
}

.business-directory-container .contact-item {
    color: var(--bd-contact-text) !important;
}

/* ==== SOCIAL MEDIA ICONS ==== */
/* Note: Social media icons are now handled by dedicated social-media-icons.css */

/* ==== CARD FOOTER AND BUTTONS ==== */

.business-directory-container .card-footer {
    background: var(--bd-footer-bg) !important;
    border-top: 1px solid var(--bd-footer-border) !important;
}

.business-directory-container .view-details-button {
    background: var(--bd-button-bg) !important;
    color: var(--bd-button-color) !important;
}

.business-directory-container .view-details-button:hover {
    background: var(--bd-button-hover) !important;
    color: var(--bd-button-color) !important;
}

.business-directory-container .badge-featured {
    background: var(--bd-badge-featured-bg) !important;
    color: var(--bd-badge-featured-color) !important;
}

.business-directory-container .favorite-button {
    background: var(--bd-favorite-bg) !important;
    color: var(--bd-favorite-color) !important;
}

.business-directory-container .favorite-button:hover {
    background: var(--bd-favorite-hover) !important;
}

.business-directory-container .business-card::before {
    background: var(--bd-card-top-border) !important;
}

/* ==== INSTRUCTIONS FOR CUSTOMIZATION ==== */

/*
To customize the card colors:

1. EASY METHOD - Use predefined themes:
   - Uncomment one of the predefined theme sections above
   - Save the file and refresh your page

2. ADVANCED METHOD - Create your own colors:
   - Modify the color values in the main :root section at the top
   - Use any valid CSS color format (hex, rgb, hsl, named colors)
   - Save the file and refresh your page

3. EXAMPLES:
   - Hex colors: #ff0000 (red), #00ff00 (green), #0000ff (blue)
   - RGB colors: rgb(255, 0, 0) (red), rgba(255, 0, 0, 0.5) (semi-transparent red)
   - HSL colors: hsl(0, 100%, 50%) (red)
   - Named colors: red, blue, green, purple, orange, etc.

4. GRADIENTS:
   - Linear gradients: linear-gradient(135deg, #color1 0%, #color2 100%)
   - You can use gradient generators online to create custom gradients

5. SHADOWS:
   - Box shadows: 0 4px 6px rgba(0, 0, 0, 0.1)
   - Multiple shadows: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05)

Remember to include this file AFTER the main business directory CSS files in your theme!
*/