/* Blue Accent Styles for Generator and Category Pages */
/* Uses #336699 as the primary accent color */

/* Form container with subtle left border - DISABLED */
.form-container {
    /* border-left: 4px solid #336699 !important; */
}

/* Primary button with blue accent */
.btn-primary,
.btn,
button.btn {
    background: #336699 !important;
    color: white !important;
    border-color: #336699 !important;
}

.btn-primary:hover,
.btn:hover,
button.btn:hover {
    background: #2c5282 !important;
    border-color: #2c5282 !important;
    box-shadow: 0 10px 25px -5px rgba(51, 102, 153, 0.2) !important;
}

/* Active nav tabs */
.nav-tab.active {
    color: #336699;
    border-bottom: 2px solid #336699;
}

/* Form inputs on focus */
.form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: #336699;
    box-shadow: 0 0 0 3px rgba(51, 102, 153, 0.1);
}

/* Checkbox items when checked */
.checkbox-item.checked {
    background: rgba(51, 102, 153, 0.05);
    border-color: #336699;
}

.checkbox-item input[type="checkbox"]:checked {
    accent-color: #336699;
}

/* Name cards on hover */
.name-card:hover {
    border-color: #336699;
    box-shadow: 0 10px 25px -5px rgba(51, 102, 153, 0.15);
}

/* Action buttons in name cards */
.name-actions button:hover {
    color: #336699;
}

/* Save button when item is saved */
.save-btn.saved {
    color: #336699;
}

/* Loading spinner with blue accent */
.loading-spinner {
    border-color: rgba(51, 102, 153, 0.3);
    border-top-color: #336699;
}

/* Results section header accent */
.results-header {
    border-left: 4px solid #336699;
    padding-left: 16px;
}

/* Category cards with blue accent */
.category-card {
    transition: all 0.3s;
}

.category-card:hover {
    border-left: 4px solid #336699;
    box-shadow: 0 4px 20px rgba(51, 102, 153, 0.15);
}

/* Generator cards in category pages */
.generator-card {
    border-left: 3px solid transparent;
    transition: all 0.3s;
}

.generator-card:hover {
    border-left-color: #336699;
    box-shadow: 0 4px 20px rgba(51, 102, 153, 0.15);
}

/* Links with blue accent */
a {
    color: #336699;
}

a:hover {
    color: #2c5282;
}

/* Hero section subtle gradient */
.hero-section {
    background: linear-gradient(135deg, #f8fafc 0%, rgba(51, 102, 153, 0.03) 100%);
}

/* Section headers with accent */
h2 {
    position: relative;
}

.section h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: #336699;
    border-radius: 2px;
}

/* Content sections with subtle borders */
.content-section {
    border-left: 2px solid rgba(51, 102, 153, 0.1);
    padding-left: 24px;
}

/* FAQ items */
.faq-item summary:hover {
    color: #336699;
}

.faq-item[open] summary {
    color: #336699;
}

/* Breadcrumb links */
.breadcrumb a:hover {
    color: #336699;
}

/* Stats or metrics if present */
.stat-card {
    border-top: 3px solid #336699;
}

/* Active filters or selected items */
.filter-item.active,
.tag.active {
    background: #336699;
    color: white;
}

/* Copy button hover state */
.copy-btn:hover {
    background: rgba(51, 102, 153, 0.1);
    color: #336699;
}

/* Success messages */
.success-message {
    border-left: 4px solid #336699;
    background: rgba(51, 102, 153, 0.05);
}

/* Pagination if present */
.pagination .active {
    background: #336699;
    color: white;
}

.pagination a:hover {
    color: #336699;
    border-color: #336699;
}