/* =========================================
   Baby Names Manager - Enhanced Theme Integration CSS
   ========================================= */

/* This file contains styles that integrate the plugin with the GeneratePress child theme */

/* Remove plugin-specific global styles that conflict with theme */
.bnm-single-page-wrapper,
.bnm-search-page {
    font-family: var(--font-family, 'Poppins', sans-serif);
    /* Use theme font */
    background: var(--bg-soft, #fafafa);
    /* Use theme background */
    padding: 0;
    /* Let theme handle padding */
    color: var(--text-dark, #2d2d2d);
}

/* Integrate with theme container */
.bnm-single-page-wrapper .page-container {
    max-width: var(--container-max-width, 1400px);
    margin: 0 auto;
    padding: 40px 20px;
}

/* Use theme button styles for plugin buttons */
.pronounce-btn {
    background: var(--gradient-primary, linear-gradient(135deg, #ff6b9d, #ff8e53));
    box-shadow: var(--shadow-primary, 0 8px 30px rgba(255, 107, 157, 0.3));
    font-family: var(--font-family, 'Poppins', sans-serif);
}

.pronounce-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(255, 107, 157, 0.4);
}

/* Integrate action buttons with theme */
.bnm-action-btn {
    font-family: var(--font-family, 'Poppins', sans-serif);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bnm-action-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-medium, 0 8px 30px rgba(0, 0, 0, 0.04));
}

/* Use theme card styles */
.info-card,
.content-section,
.sticky-sidebar {
    background: var(--bg-white, #ffffff);
    border-radius: var(--border-radius-large, 20px);
    box-shadow: var(--shadow-medium, 0 8px 30px rgba(0, 0, 0, 0.04));
    transition: all 0.3s ease;
}

.content-section:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-large, 0 12px 40px rgba(0, 0, 0, 0.08));
}

/* Use theme typography */
.name-heading {
    font-family: var(--font-family, 'Poppins', sans-serif);
    background: var(--gradient-text, linear-gradient(90deg, #ff6b9d, #ff8e53, #a0a0a0, #6bb6ff, #6366f1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    color: var(--text-dark, #2d2d2d);
}

.section-title::after {
    background: var(--gradient-primary, linear-gradient(90deg, #ff6b9d, #ff8e53));
}

/* Integrate navigation with theme */
.nav-title {
    color: var(--primary-color, #ff6b9d);
    font-family: var(--font-family, 'Poppins', sans-serif);
}

.sidebar-nav a {
    font-family: var(--font-family, 'Poppins', sans-serif);
    color: var(--text-gray, #333);
}

.sidebar-nav a.active {
    background: var(--gradient-primary, linear-gradient(135deg, #ff6b9d, #ff8e53));
    color: white;
}

.sidebar-nav a:hover {
    color: var(--text-dark, #2d2d2d);
}

/* Mobile navigation integration */
.mobile-sticky-nav {
    font-family: var(--font-family, 'Poppins', sans-serif);
}

.mobile-nav-link.active {
    background: var(--gradient-primary, linear-gradient(135deg, #ff6b9d, #ff8e53));
}

/* Integrate with theme colors */
:root {
    --bnm-primary: var(--primary-color, #ff6b9d);
    --bnm-secondary: var(--secondary-color, #6366f1);
    --bnm-accent: var(--accent-color, #ff8e53);
    --bnm-success: var(--success-color, #2ed573);
    --bnm-text-dark: var(--text-dark, #2d2d2d);
    --bnm-text-gray: var(--text-gray, #333);
    --bnm-bg-soft: var(--bg-soft, #fafafa);
    --bnm-bg-white: var(--bg-white, #ffffff);
}

/* Update action button states to use theme colors */
.bnm-fav:hover,
.bnm-fav.is-active {
    background: rgba(255, 107, 157, 0.1);
    color: var(--bnm-primary);
    border-color: var(--bnm-primary);
}

.bnm-like:hover,
.bnm-like.is-active {
    background: rgba(46, 213, 115, 0.1);
    color: var(--bnm-success);
    border-color: var(--bnm-success);
}

.bnm-share:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--bnm-secondary);
    border-color: var(--bnm-secondary);
}

/* Ensure proper spacing with theme layout */
@media (max-width: 1024px) {
    .bnm-single-page-wrapper .page-container {
        padding: 30px 15px;
    }
}

@media (max-width: 768px) {
    .bnm-single-page-wrapper .page-container {
        padding: 20px 15px;
    }

    .hero-wrapper {
        padding: 0;
    }
}

/* Animation integration with theme */
.bnm-single-page-wrapper .animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure plugin content works with theme's responsive design */
.bnm-single-page-wrapper .container,
.bnm-single-page-wrapper .inside-article {
    max-width: var(--container-max-width, 1400px);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Remove any conflicting margins/padding */
.bnm-single-page-wrapper .site-content {
    padding: 0;
}

/* Integrate breadcrumbs with theme */
.breadcrumb {
    font-family: var(--font-family, 'Poppins', sans-serif);
    color: var(--text-gray, #333);
}

.breadcrumb a {
    color: var(--text-gray, #333);
}

.breadcrumb a:hover {
    color: var(--primary-color, #ff6b9d);
}

/* Ensure forms integrate with theme */
.bnm-single-page-wrapper input,
.bnm-single-page-wrapper select,
.bnm-single-page-wrapper textarea {
    font-family: var(--font-family, 'Poppins', sans-serif);
    border-radius: var(--border-radius, 12px);
}

/* Widget integration */
.bnm-single-page-wrapper .widget {
    background: var(--bg-white, #ffffff);
    border-radius: var(--border-radius-large, 20px);
    box-shadow: var(--shadow-medium, 0 8px 30px rgba(0, 0, 0, 0.04));
}

/* Ensure proper z-index for sticky elements */
.sticky-sidebar {
    z-index: 10;
}

.mobile-sticky-nav {
    z-index: 1000;
}

/* Theme-consistent loading states */
.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary-color, #ff6b9d);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Ensure accessibility with theme */
.bnm-single-page-wrapper *:focus {
    outline: 2px solid var(--primary-color, #ff6b9d);
    outline-offset: 2px;
}

/* Enhanced Search Page Integration */
.bnm-search-page .bnm-container {
    max-width: var(--container-max-width, 1400px);
    margin: 0 auto;
    padding: 0 20px;
}

.bnm-page-title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    background: var(--gradient-text, linear-gradient(90deg, #ff6b9d, #ff8e53, #a0a0a0, #6bb6ff, #6366f1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.bnm-page-subtitle {
    color: var(--text-gray, #333);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

/* Enhanced Filter Sidebar */
.bnm-filter-sidebar {
    background: var(--bg-white, #ffffff);
    border-radius: var(--border-radius-large, 20px);
    box-shadow: var(--shadow-medium, 0 8px 30px rgba(0, 0, 0, 0.04));
    padding: var(--card-padding, 30px);
    transition: all 0.3s ease;
}

.bnm-filter-sidebar:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-large, 0 12px 40px rgba(0, 0, 0, 0.08));
}

.bnm-filter-sidebar-title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    color: var(--text-dark, #2d2d2d);
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--primary-color, #ff6b9d);
    position: relative;
}

.bnm-filter-sidebar-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--gradient-primary, linear-gradient(135deg, #ff6b9d, #ff8e53));
    border-radius: 2px;
}

/* Enhanced Form Elements */
.bnm-input,
.bnm-select {
    font-family: var(--font-family, 'Poppins', sans-serif);
    padding: 12px 16px;
    border: 2px solid var(--border-light, #e1e1e1);
    border-radius: var(--border-radius, 12px);
    font-size: var(--font-size-base, 16px);
    transition: all 0.3s ease;
    background: var(--bg-white, #ffffff);
    width: 100%;
    color: var(--text-dark, #2d2d2d);
}

.bnm-input:focus,
.bnm-select:focus {
    outline: none;
    border-color: var(--primary-color, #ff6b9d);
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
}

.bnm-filter-group label {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    color: var(--text-dark, #2d2d2d);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Enhanced Buttons */
.bnm-btn {
    font-family: var(--font-family, 'Poppins', sans-serif);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: var(--font-size-base, 16px);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.bnm-btn-primary {
    background: var(--gradient-primary, linear-gradient(135deg, #ff6b9d, #ff8e53));
    color: white;
    box-shadow: var(--shadow-primary, 0 8px 30px rgba(255, 107, 157, 0.3));
}

.bnm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(255, 107, 157, 0.4);
    color: white;
}

.bnm-btn-secondary {
    background: white;
    color: var(--secondary-color, #6366f1);
    border: 2px solid var(--secondary-color, #6366f1);
    box-shadow: var(--shadow-small, 0 2px 8px rgba(0, 0, 0, 0.08));
}

.bnm-btn-secondary:hover {
    background: var(--secondary-color, #6366f1);
    color: white;
    transform: translateY(-2px);
}

/* Enhanced Name Cards */
.bnm-name-card {
    background: var(--bg-white, #ffffff);
    border-radius: var(--border-radius-large, 20px);
    box-shadow: var(--shadow-medium, 0 8px 30px rgba(0, 0, 0, 0.04));
    transition: all 0.3s ease;
    border: 1px solid transparent;
    padding: var(--card-padding, 30px);
}

.bnm-name-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-large, 0 12px 40px rgba(0, 0, 0, 0.08));
    border-color: var(--primary-color, #ff6b9d);
}

.bnm-name-title {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 700;
    color: var(--text-dark, #2d2d2d);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.bnm-name-meaning {
    color: var(--text-gray, #333);
    font-size: var(--font-size-base, 16px);
    line-height: var(--line-height-base, 1.6);
    margin-bottom: 1rem;
}

/* Enhanced Badges */
.bnm-name-badge {
    font-family: var(--font-family, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bnm-badge-boy,
.bnm-badge-male {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.bnm-badge-girl,
.bnm-badge-female {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
    border: 1px solid rgba(236, 72, 153, 0.2);
}

.bnm-badge-unisex,
.bnm-badge-neutral {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Enhanced Action Buttons */
.bnm-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray, #333);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-small, 0 2px 8px rgba(0, 0, 0, 0.08));
    text-decoration: none;
}

.bnm-action:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-medium, 0 8px 30px rgba(0, 0, 0, 0.04));
    color: var(--text-dark, #2d2d2d);
}

.bnm-fav:hover,
.bnm-fav.is-active {
    background: rgba(255, 107, 157, 0.1);
    color: var(--primary-color, #ff6b9d);
    border-color: var(--primary-color, #ff6b9d);
}

.bnm-view-details {
    background: var(--btn-view-details-bg, var(--brand-gradient));
    color: var(--btn-view-details-color, #FFFFFF);
    padding: 8px 18px;
    border-radius: var(--radius-pill, 50px);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb, 217, 0, 107), 0.25);
    border: none;
}

.bnm-view-details:hover {
    transform: translateY(-1px);
    background: var(--btn-view-details-hover-bg, var(--brand-gradient-hover));
    box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb, 217, 0, 107), 0.35);
    color: var(--btn-view-details-hover-color, #FFFFFF);
    gap: 8px;
}

/* Enhanced Pagination */
.bnm-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 40px 0;
    font-family: var(--font-family, 'Poppins', sans-serif);
}

.bnm-pagination-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    color: var(--text-gray, #333);
    border: 2px solid var(--border-light, #e1e1e1);
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bnm-pagination-link:hover {
    background: var(--primary-color, #ff6b9d);
    color: white;
    border-color: var(--primary-color, #ff6b9d);
    transform: translateY(-2px);
}

.bnm-pagination-info {
    font-weight: 600;
    color: var(--text-dark, #2d2d2d);
    padding: 12px 20px;
    background: var(--bg-soft, #fafafa);
    border-radius: 50px;
}

/* Gender and Religion Icons */
.gender-icon,
.religion-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
}

.gender-icon.male,
.gender-icon.boy {
    color: #3b82f6;
}

.gender-icon.female,
.gender-icon.girl {
    color: #ec4899;
}

.gender-icon.unisex,
.gender-icon.neutral {
    color: #8b5cf6;
}

.religion-icon.hindu {
    color: #f97316;
}

.religion-icon.muslim,
.religion-icon.islamic {
    color: #059669;
}

.religion-icon.christian {
    color: #7c3aed;
}

.religion-icon.jewish {
    color: #2563eb;
}

.religion-icon.sikh {
    color: #dc2626;
}

.religion-icon.buddhist {
    color: #eab308;
}

.religion-icon.jain {
    color: #16a34a;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .bnm-search-page .bnm-container {
        padding: 30px 15px;
    }

    .bnm-page-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .bnm-search-page .bnm-container {
        padding: 20px 15px;
    }

    .bnm-page-title {
        font-size: 1.75rem;
    }

    .bnm-filter-sidebar {
        padding: 20px;
    }

    .bnm-name-card {
        padding: 20px;
    }
}

/* Print styles integration */
@media print {

    .bnm-single-page-wrapper,
    .bnm-search-page {
        background: white !important;
        color: black !important;
    }

    .sticky-sidebar,
    .mobile-sticky-nav,
    .bnm-action-btn,
    .bnm-action {
        display: none !important;
    }
}