/**
 * Component-Specific Color Overrides
 * Centralizes all hardcoded colors found throughout the application
 * All components should reference the centralized color system
 */

/* === FORM CONTROLS === */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-text-primary);
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-focus);
  color: var(--color-text-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--color-input-placeholder);
}

select.form-control option {
  background-color: var(--color-input-bg);
  color: var(--color-text-primary);
}

/* === BUTTONS === */
.btn-primary {
  background-color: var(--color-btn-primary-bg) !important;
  border-color: var(--color-btn-primary-border) !important;
  color: var(--color-btn-primary-text) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-btn-primary-hover-bg) !important;
  border-color: var(--color-btn-primary-border) !important;
  color: var(--color-btn-primary-text) !important;
}

.btn-secondary {
  background-color: var(--color-btn-secondary-bg) !important;
  border-color: var(--color-btn-secondary-border) !important;
  color: var(--color-btn-secondary-text) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-btn-secondary-hover-bg) !important;
  border-color: var(--color-btn-secondary-border) !important;
  color: var(--color-btn-secondary-text) !important;
}

.btn-outline-secondary {
  color: var(--color-btn-secondary-bg);
  border-color: var(--color-btn-secondary-border);
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--color-btn-secondary-text);
  background-color: var(--color-btn-secondary-bg);
  border-color: var(--color-btn-secondary-border);
}

.btn-outline-info {
  color: var(--color-info);
  border-color: var(--color-info-border);
  background-color: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  color: var(--color-info-text);
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.btn-outline-danger {
  color: var(--color-error);
  border-color: var(--color-error-border);
  background-color: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  color: var(--color-error-text);
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
}

/* === BADGES & STATUS INDICATORS === */
.badge-success,
.status-valid,
span.badge-success,
.badge.badge-success,
.table .badge-success,
.timeline-body .badge-success {
  background-color: #19d17c !important;
  color: #ffffff !important;
  border-color: #19d17c !important;
}

.badge-danger,
.status-invalid,
.status-error {
  background-color: var(--color-error) !important;
  color: var(--color-error-text) !important;
}

.badge-warning,
.status-expired {
  background-color: var(--color-warning) !important;
  color: var(--color-warning-text) !important;
}

.badge-info {
  background-color: var(--color-info) !important;
  color: var(--color-info-text) !important;
}

.badge-primary {
  background-color: var(--color-btn-primary-bg) !important;
  color: var(--color-btn-primary-text) !important;
}

.badge-secondary {
  background-color: var(--color-gray-500) !important;
  color: var(--color-white) !important;
}

.badge-light {
  background-color: var(--color-gray-200) !important;
  color: var(--color-gray-800) !important;
}

.badge-dark {
  background-color: var(--color-gray-800) !important;
  color: var(--color-white) !important;
}

.status-pending {
  background-color: var(--color-gray-500) !important;
  color: var(--color-white) !important;
}

/* === LEAD STATUS COLORS === */
.status-select option[value="new"] {
  background-color: var(--color-status-new-bg);
  color: var(--color-status-new);
}

.status-select option[value="contacted"] {
  background-color: var(--color-status-contacted-bg);
  color: var(--color-status-contacted);
}

.status-select option[value="responded"],
.status-select option[value="qualified"] {
  background-color: var(--color-status-responded-bg);
  color: var(--color-status-responded);
}

.status-select option[value="disqualified"] {
  background-color: var(--color-status-disqualified-bg);
  color: var(--color-status-disqualified);
}

/* === AI SCORE STYLING === */
.ai-score-value.high-score {
  background-color: var(--color-score-high);
  border: 2px solid var(--color-score-high-border);
  color: var(--color-white);
}

.ai-score-value.medium-score {
  background-color: var(--color-score-medium);
  border: 2px solid var(--color-score-medium-border);
  color: var(--color-gray-800);
}

.ai-score-value.low-score {
  background-color: var(--color-score-low);
  border: 2px solid var(--color-score-low-border);
  color: var(--color-white);
}

.ai-score-label,
.ai-score-placeholder {
  color: var(--color-text-secondary);
}

.ai-score-section {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
}

.ai-score-details {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
}

.ai-reasoning {
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-btn-primary-bg);
}

/* === FEEDBACK BUTTONS === */
.feedback-like {
  color: var(--color-feedback-like);
  border: 1px solid var(--color-feedback-like);
}

.feedback-like:hover {
  background-color: var(--color-feedback-like);
  color: var(--color-white);
}

.feedback-dislike {
  color: var(--color-feedback-dislike);
  border: 1px solid var(--color-feedback-dislike);
}

.feedback-dislike:hover {
  background-color: var(--color-feedback-dislike);
  color: var(--color-white);
}

.feedback-section {
  background-color: var(--color-bg-secondary);
}

/* === FUNNEL STAGES === */
.funnel-container {
  background: var(--gradient-funnel);
}

.funnel-stage {
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-primary);
}

.funnel-stage:hover {
  border-color: var(--color-btn-primary-bg);
  box-shadow: 0 8px 25px var(--overlay-black-15);
}

.stage-icon {
  background: var(--gradient-funnel-stage);
  color: var(--color-white);
}

.stage-number {
  color: var(--color-btn-primary-bg);
}

.stage-label {
  color: var(--color-text-secondary);
}

.conversion-arrow {
  color: var(--color-btn-primary-bg);
}

.conversion-rate {
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
}

/* Stage-specific colors */
.funnel-stage[data-stage="1"] .stage-icon {
  background: linear-gradient(135deg, var(--color-funnel-stage-1) 0%, var(--color-funnel-stage-1-dark) 100%);
}

.funnel-stage[data-stage="2"] .stage-icon {
  background: linear-gradient(135deg, var(--color-funnel-stage-2) 0%, var(--color-funnel-stage-2-dark) 100%);
}

.funnel-stage[data-stage="3"] .stage-icon {
  background: linear-gradient(135deg, var(--color-funnel-stage-3) 0%, var(--color-funnel-stage-3-dark) 100%);
}

.funnel-stage[data-stage="4"] .stage-icon {
  background: linear-gradient(135deg, var(--color-funnel-stage-4) 0%, var(--color-funnel-stage-4-dark) 100%);
}

/* === AI RECOMMENDATIONS === */
.ai-recommendations-bar {
  background: var(--gradient-ai-recommendations);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-12);
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.recommendation-content {
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-white);
}

.recommendation-icon {
  font-size: var(--icon-lg);
  opacity: 0.9;
}

.recommendation-message {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.cta-button {
  background: var(--color-recommendation-overlay);
  border: 1px solid var(--color-recommendation-border);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-base);
  backdrop-filter: blur(10px);
}

.cta-button:hover {
  background: var(--color-recommendation-hover);
  transform: translateY(-1px);
}

.expand-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-btn-primary-bg);
}

.response-item-box {
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-primary);
}

.response-item-box:hover {
  border-color: var(--color-btn-primary-bg);
}

.response-value {
  color: var(--color-btn-primary-bg);
}

.response-label {
  color: var(--color-text-secondary);
}

/* === TIMELINE COMPONENTS === */
.timeline-container::before {
  background: var(--color-border-primary);
}

.timeline-marker {
  background: var(--color-timeline-default);
  border: 2px solid var(--color-bg-primary);
  box-shadow: 0 0 0 3px var(--color-bg-secondary);
}

.timeline-marker.manual {
  background: var(--color-timeline-manual);
}

.timeline-marker.extension {
  background: var(--color-timeline-extension);
}

.timeline-marker.api {
  background: var(--color-timeline-api);
}

.timeline-marker.validation {
  background: var(--color-timeline-validation);
}

.timeline-content {
  background: var(--color-bg-secondary);
}

.timeline-content::before {
  border-color: transparent var(--color-bg-secondary) transparent transparent;
}

/* === DROPDOWN COMPONENTS === */
.dropdown-item:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-btn-primary-bg);
}

.status-edit-icon:hover {
  color: var(--color-btn-primary-bg);
  background-color: var(--color-bg-hover);
}

/* === MESSAGE PREVIEW === */
.message-preview::after {
  background: linear-gradient(to bottom, transparent, var(--color-bg-primary));
}

/* === SETTINGS FORMS === */
.settings-card {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  box-shadow: 0 2px 4px var(--color-shadow);
}

.settings-sidebar {
  background-color: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border-primary);
}

.settings-nav-link {
  color: var(--color-text-secondary);
}

.settings-nav-link:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.settings-nav-link.active {
  background-color: var(--color-bg-hover);
  color: var(--color-btn-primary-bg);
}

.settings-section-title {
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-primary);
}

/* === TONE BADGES === */
.tone-formal-executive {
  background: var(--color-tone-formal);
  color: var(--color-white);
}

.tone-professional-casual {
  background: var(--color-tone-professional);
  color: var(--color-white);
}

.tone-friendly-conversational {
  background: var(--color-tone-friendly);
  color: var(--color-gray-800);
}

/* === STRATEGY BADGES === */
.strategy-problem-aware { 
  background: var(--color-strategy-problem-aware); 
  color: var(--color-white); 
}

.strategy-problem-unaware { 
  background: var(--color-strategy-problem-unaware); 
  color: var(--color-white); 
}

.strategy-solution-exploring { 
  background: var(--color-strategy-solution); 
  color: var(--color-gray-800); 
}

.strategy-success-story { 
  background: var(--color-strategy-success); 
  color: var(--color-white); 
}

/* === CTA BADGES === */
.cta-question-based { 
  background: var(--color-cta-question); 
  color: var(--color-white); 
}

.cta-calendar-link { 
  background: var(--color-cta-calendar); 
  color: var(--color-white); 
}

.cta-value-first { 
  background: var(--color-cta-value); 
  color: var(--color-gray-800); 
}

.cta-custom { 
  background: var(--color-cta-custom); 
  color: var(--color-white); 
}

/* === COMMITMENT BADGES === */
.commitment-low { 
  background: var(--color-commitment-low); 
  color: var(--color-white); 
}

.commitment-medium { 
  background: var(--color-commitment-medium); 
  color: var(--color-gray-800); 
}

.commitment-flexible { 
  background: var(--color-commitment-flexible); 
  color: var(--color-white); 
}

/* === TABLES === */
.table {
  color: var(--color-text-primary);
  background-color: transparent;
}

.table th {
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border-primary);
}

.table td {
  color: var(--color-text-primary);
  border-color: var(--color-border-primary);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-bg-secondary);
}

.table thead th {
  border-bottom: 2px solid var(--color-border-primary);
}

/* === MODALS === */
.modal-backdrop {
  background-color: var(--color-modal-backdrop);
}

.modal-content {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
}

/* === ERROR STATES === */
.error-details {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
}

.help-text,
.form-text {
  color: var(--color-text-secondary);
}

.required-field::after {
  color: var(--color-error);
}

/* === MISC COMPONENTS === */
.age-dot {
  background-color: var(--color-error);
}

.age-text {
  color: var(--color-error);
}

.confidence-dots {
  color: var(--color-btn-primary-bg);
}

.cookie-value-container {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
}

.cookie-value-truncated,
.cookie-value-full {
  color: var(--color-text-primary);
}

.cookie-value-toggle {
  color: var(--color-btn-primary-bg);
}

/* === STEP NUMBERS === */
.step-number {
  background-color: var(--color-gray-500);
  color: var(--color-white);
}

/* === TARGETING OPTIONS === */
.targeting-option {
  background-color: var(--color-bg-primary);
  border: 2px solid var(--color-border-primary);
  color: var(--color-text-primary);
}

.targeting-option:hover {
  border-color: var(--color-btn-primary-bg);
  background-color: var(--color-bg-hover);
  box-shadow: 0 5px 15px var(--overlay-black-10);
}

.targeting-option.selected {
  border-color: var(--color-btn-primary-bg);
  background-color: var(--color-bg-hover);
}

.targeting-icon {
  color: var(--color-btn-primary-bg);
}

.targeting-title {
  color: var(--color-text-primary);
}

.targeting-description {
  color: var(--color-text-secondary);
}

/* === FOOTER === */
.page-footer {
  background-color: var(--color-bg-primary);
  border-top: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
}

.footer-content {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  padding: var(--space-2, 0.5rem) 0;
}

.footer-content a {
  color: var(--color-link);
  text-decoration: none;
  margin: 0 var(--space-2, 0.5rem);
}

.footer-content a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* === QUEUE PAGE === */
.message-text {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.message-text.collapsed,
.message-text.expanded {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  padding: var(--space-2, 0.5rem);
  border-radius: var(--radius-base, 4px);
  border: 1px solid var(--color-border-primary);
}

/* === BOOTSTRAP OVERRIDES === */
/* Override Bootstrap primary colors to align with custom color system */
.btn.btn-primary,
button.btn-primary,
a.btn-primary {
  background-color: var(--color-btn-primary-bg) !important;
  border-color: var(--color-btn-primary-border) !important;
  color: var(--color-btn-primary-text) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
  background-color: var(--color-btn-primary-hover-bg) !important;
  border-color: var(--color-btn-primary-border) !important;
  color: var(--color-btn-primary-text) !important;
}

/* === BORDERLESS BUTTON DESIGN === */
/* Light Theme - Borderless buttons with black icons, white hover background */
html[data-theme="light"] .btn.btn-outline-primary,
html[data-theme="light"] button.btn-outline-primary,
html[data-theme="light"] a.btn-outline-primary,
html[data-theme="light"] .btn.btn-outline-success,
html[data-theme="light"] button.btn-outline-success,
html[data-theme="light"] a.btn-outline-success,
html[data-theme="light"] .btn.btn-outline-secondary,
html[data-theme="light"] button.btn-outline-secondary,
html[data-theme="light"] a.btn-outline-secondary,
html[data-theme="light"] .btn.btn-outline-info,
html[data-theme="light"] button.btn-outline-info,
html[data-theme="light"] a.btn-outline-info,
html[data-theme="light"] .btn.btn-outline-danger,
html[data-theme="light"] button.btn-outline-danger,
html[data-theme="light"] a.btn-outline-danger {
  color: var(--brand-primary) !important; /* Near black */
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] .btn.btn-outline-primary:hover,
html[data-theme="light"] .btn.btn-outline-primary:focus,
html[data-theme="light"] .btn.btn-outline-primary:active,
html[data-theme="light"] button.btn-outline-primary:hover,
html[data-theme="light"] button.btn-outline-primary:focus,
html[data-theme="light"] button.btn-outline-primary:active,
html[data-theme="light"] a.btn-outline-primary:hover,
html[data-theme="light"] a.btn-outline-primary:focus,
html[data-theme="light"] a.btn-outline-primary:active,
html[data-theme="light"] .btn.btn-outline-success:hover,
html[data-theme="light"] .btn.btn-outline-success:focus,
html[data-theme="light"] .btn.btn-outline-success:active,
html[data-theme="light"] button.btn-outline-success:hover,
html[data-theme="light"] button.btn-outline-success:focus,
html[data-theme="light"] button.btn-outline-success:active,
html[data-theme="light"] a.btn-outline-success:hover,
html[data-theme="light"] a.btn-outline-success:focus,
html[data-theme="light"] a.btn-outline-success:active,
html[data-theme="light"] .btn.btn-outline-secondary:hover,
html[data-theme="light"] .btn.btn-outline-secondary:focus,
html[data-theme="light"] .btn.btn-outline-secondary:active,
html[data-theme="light"] button.btn-outline-secondary:hover,
html[data-theme="light"] button.btn-outline-secondary:focus,
html[data-theme="light"] button.btn-outline-secondary:active,
html[data-theme="light"] a.btn-outline-secondary:hover,
html[data-theme="light"] a.btn-outline-secondary:focus,
html[data-theme="light"] a.btn-outline-secondary:active,
html[data-theme="light"] .btn.btn-outline-info:hover,
html[data-theme="light"] .btn.btn-outline-info:focus,
html[data-theme="light"] .btn.btn-outline-info:active,
html[data-theme="light"] button.btn-outline-info:hover,
html[data-theme="light"] button.btn-outline-info:focus,
html[data-theme="light"] button.btn-outline-info:active,
html[data-theme="light"] a.btn-outline-info:hover,
html[data-theme="light"] a.btn-outline-info:focus,
html[data-theme="light"] a.btn-outline-info:active,
html[data-theme="light"] .btn.btn-outline-danger:hover,
html[data-theme="light"] .btn.btn-outline-danger:focus,
html[data-theme="light"] .btn.btn-outline-danger:active,
html[data-theme="light"] button.btn-outline-danger:hover,
html[data-theme="light"] button.btn-outline-danger:focus,
html[data-theme="light"] button.btn-outline-danger:active,
html[data-theme="light"] a.btn-outline-danger:hover,
html[data-theme="light"] a.btn-outline-danger:focus,
html[data-theme="light"] a.btn-outline-danger:active {
  color: var(--brand-primary) !important; /* Keep black text */
  background-color: var(--color-white) !important; /* White background on hover */
  border: none !important;
  box-shadow: 0 2px 4px var(--color-shadow) !important; /* Subtle shadow */
}

/* Dark Theme - Borderless buttons with white icons, light background hover */
html[data-theme="dark"] .btn.btn-outline-primary,
html[data-theme="dark"] button.btn-outline-primary,
html[data-theme="dark"] a.btn-outline-primary,
html[data-theme="dark"] .btn.btn-outline-success,
html[data-theme="dark"] button.btn-outline-success,
html[data-theme="dark"] a.btn-outline-success,
html[data-theme="dark"] .btn.btn-outline-secondary,
html[data-theme="dark"] button.btn-outline-secondary,
html[data-theme="dark"] a.btn-outline-secondary,
html[data-theme="dark"] .btn.btn-outline-info,
html[data-theme="dark"] button.btn-outline-info,
html[data-theme="dark"] a.btn-outline-info,
html[data-theme="dark"] .btn.btn-outline-danger,
html[data-theme="dark"] button.btn-outline-danger,
html[data-theme="dark"] a.btn-outline-danger {
  color: var(--color-white) !important; /* White */
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .btn.btn-outline-primary:hover,
html[data-theme="dark"] .btn.btn-outline-primary:focus,
html[data-theme="dark"] .btn.btn-outline-primary:active,
html[data-theme="dark"] button.btn-outline-primary:hover,
html[data-theme="dark"] button.btn-outline-primary:focus,
html[data-theme="dark"] button.btn-outline-primary:active,
html[data-theme="dark"] a.btn-outline-primary:hover,
html[data-theme="dark"] a.btn-outline-primary:focus,
html[data-theme="dark"] a.btn-outline-primary:active,
html[data-theme="dark"] .btn.btn-outline-success:hover,
html[data-theme="dark"] .btn.btn-outline-success:focus,
html[data-theme="dark"] .btn.btn-outline-success:active,
html[data-theme="dark"] button.btn-outline-success:hover,
html[data-theme="dark"] button.btn-outline-success:focus,
html[data-theme="dark"] button.btn-outline-success:active,
html[data-theme="dark"] a.btn-outline-success:hover,
html[data-theme="dark"] a.btn-outline-success:focus,
html[data-theme="dark"] a.btn-outline-success:active,
html[data-theme="dark"] .btn.btn-outline-secondary:hover,
html[data-theme="dark"] .btn.btn-outline-secondary:focus,
html[data-theme="dark"] .btn.btn-outline-secondary:active,
html[data-theme="dark"] button.btn-outline-secondary:hover,
html[data-theme="dark"] button.btn-outline-secondary:focus,
html[data-theme="dark"] button.btn-outline-secondary:active,
html[data-theme="dark"] a.btn-outline-secondary:hover,
html[data-theme="dark"] a.btn-outline-secondary:focus,
html[data-theme="dark"] a.btn-outline-secondary:active,
html[data-theme="dark"] .btn.btn-outline-info:hover,
html[data-theme="dark"] .btn.btn-outline-info:focus,
html[data-theme="dark"] .btn.btn-outline-info:active,
html[data-theme="dark"] button.btn-outline-info:hover,
html[data-theme="dark"] button.btn-outline-info:focus,
html[data-theme="dark"] button.btn-outline-info:active,
html[data-theme="dark"] a.btn-outline-info:hover,
html[data-theme="dark"] a.btn-outline-info:focus,
html[data-theme="dark"] a.btn-outline-info:active,
html[data-theme="dark"] .btn.btn-outline-danger:hover,
html[data-theme="dark"] .btn.btn-outline-danger:focus,
html[data-theme="dark"] .btn.btn-outline-danger:active,
html[data-theme="dark"] button.btn-outline-danger:hover,
html[data-theme="dark"] button.btn-outline-danger:focus,
html[data-theme="dark"] button.btn-outline-danger:active,
html[data-theme="dark"] a.btn-outline-danger:hover,
html[data-theme="dark"] a.btn-outline-danger:focus,
html[data-theme="dark"] a.btn-outline-danger:active {
  color: var(--color-white) !important; /* Keep white text */
  background-color: var(--color-bg-hover) !important; /* Light background on hover */
  border: none !important;
  box-shadow: none !important;
}