/* ==================================================================
   Beeclick Landing — Violet Dark Override
   Перекрашиваем светлый лендинг (#f8a204 / #EF305E / белый фон)
   в тёмно-графитовую фиолетовую палитру.
   Подключается ПОСЛЕ landing/main.css, style.css, railscasts.css
   ================================================================== */

:root {
    --bcl-bg:           #0E0B14;
    --bcl-bg-2:         #121020;
    --bcl-surface:      #16121F;
    --bcl-surface-2:    #1C1728;
    --bcl-border:       #24202F;
    --bcl-border-soft:  rgba(139, 92, 246, 0.12);
    --bcl-border-accent:rgba(139, 92, 246, 0.55);
    --bcl-accent:       #8B5CF6;
    --bcl-accent-hover: #A78BFA;
    --bcl-accent-active:#7C3AED;
    --bcl-accent-soft:  rgba(139, 92, 246, 0.12);
    --bcl-text:         #ECEAF5;
    --bcl-text-strong:  #FFFFFF;
    --bcl-text-muted:   #8A839E;
    --bcl-text-dim:     #5C5770;
}

/* ============ БАЗА: фон тёмный, текст светлый ============ */
html, body {
    background-color: var(--bcl-bg) !important;
    color: var(--bcl-text) !important;
}
body { font-family: "Poppins", sans-serif !important; }

/* Все секции и общие контейнеры */
section,
.page,
.wrapper,
.content,
.main,
.landing-dark-bg,
.landing-light-separator,
.landing-dark-separator,
.landing-dark-color,
.text-black,
.text-dark,
[class*="bg-white"],
[class*="bg-light"],
[class*="bg-gray"] {
    background-color: var(--bcl-bg) !important;
    color: var(--bcl-text) !important;
}

/* Карточки и блоки "features" на лендинге */
.card,
.feature,
.pricing,
.pricing-card,
.pricing-item,
.feature-item,
.features-item,
.block,
.box,
.widget,
.testimonial,
.team-member,
.faq-item,
.accordion-item {
    background-color: var(--bcl-surface) !important;
    border: 1px solid var(--bcl-border) !important;
    border-radius: 14px !important;
    color: var(--bcl-text) !important;
    box-shadow: 0 6px 24px -10px rgba(0,0,0,0.55) !important;
}

/* Hero-области и баннеры (обычно с градиентом) */
.header,
.hero,
.banner,
.jumbotron,
[class*="header-section"],
[class*="bg-hero"],
[class*="bg-banner"] {
    background-color: var(--bcl-bg-2) !important;
    background-image: none !important;
    color: var(--bcl-text) !important;
    border-bottom: 1px solid var(--bcl-border) !important;
}

/* Картинки-фоны (curve-white-*, landing_header_bg, 300-1light и т.п.) — убираем */
[style*="landing_header_bg.jpg"],
[style*="curve-white"],
[style*="300-1light"],
[style*="14-light"],
[style*="16-light"] {
    background-image: none !important;
    background-color: var(--bcl-bg) !important;
}

/* ============ ТЕКСТ ============ */
h1, h2, h3, h4, h5, h6,
.heading,
.title,
.section-title,
.landing-dark-title {
    color: var(--bcl-text-strong) !important;
}

p,
.landing-dark-desc,
.desc,
.text-muted,
.text-black-50,
.text-gray-600, .text-gray-500 {
    color: var(--bcl-text-muted) !important;
}

small, .small, figcaption, .text-gray-400 {
    color: var(--bcl-text-dim) !important;
}

a {
    color: var(--bcl-accent);
    text-decoration: none;
}
a:hover { color: var(--bcl-accent-hover); }

/* ============ ПЕРЕКРАСКА ЖЁЛТОГО/РОЗОВОГО АКЦЕНТА ============ */
/* Целевые оригинальные цвета: #f8a204 (оранжево-жёлтый), #EF305E (розовый),
   #FF490F, #F21692, #FF008A, #9c5aff (уже фиолет — оставляем) */

[style*="#f8a204" i],
[style*="#F8A204" i],
[style*="#ef305e" i],
[style*="#EF305E" i],
[style*="#ff008a" i],
[style*="#FF008A" i],
[style*="#f21692" i],
[style*="#ff490f" i] {
    color: var(--bcl-accent) !important;
}

/* Классы-акценты, которые в оригинале были жёлтыми/розовыми */
.text-primary,
.text-warning,
.text-danger,
.text-pink,
.text-orange,
.text-accent,
.landing-primary-color {
    color: var(--bcl-accent) !important;
}

.bg-primary,
.bg-warning,
.bg-danger,
.bg-pink,
.bg-orange,
.bg-accent,
.landing-primary-bg {
    background-color: var(--bcl-accent) !important;
    color: #fff !important;
}

/* Иконки line-awesome/fontawesome — если окрашены в жёлтый — сделаем фиолет */
i.la, i.las, i.lab, i.lar, i.fa, i.fas, i.far, i.fab {
    color: inherit;
}
.icon-primary i,
.feature .icon i,
.features-item .icon i,
.icon-accent,
.icon-accent i,
[class*="icon-lg"] i {
    color: var(--bcl-accent) !important;
}

/* ============ КНОПКИ ============ */
.btn,
button {
    border-radius: 10px !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease !important;
}

.btn-primary,
.btn-warning,
.btn-danger,
.btn-pink,
.btn-accent,
.btn-buy,
.btn.btn-lg {
    background-color: var(--bcl-accent) !important;
    border-color: var(--bcl-accent) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px -10px rgba(139, 92, 246, 0.7) !important;
}

.btn-primary:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-pink:hover,
.btn-accent:hover,
.btn-buy:hover {
    background-color: var(--bcl-accent-hover) !important;
    border-color: var(--bcl-accent-hover) !important;
    color: #fff !important;
    box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.8) !important;
}

.btn-outline,
.btn-outline-primary,
.btn-outline-warning,
.btn-outline-dark,
.btn-outline-light {
    background-color: transparent !important;
    border: 1px solid var(--bcl-border-accent) !important;
    color: var(--bcl-accent) !important;
}
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-warning:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover {
    background-color: var(--bcl-accent-soft) !important;
    color: var(--bcl-accent-hover) !important;
    border-color: var(--bcl-accent) !important;
}

.btn-light,
.btn-secondary,
.btn-white {
    background-color: var(--bcl-surface-2) !important;
    border: 1px solid var(--bcl-border) !important;
    color: var(--bcl-text) !important;
}
.btn-light:hover,
.btn-secondary:hover,
.btn-white:hover {
    background-color: var(--bcl-accent-soft) !important;
    border-color: var(--bcl-border-accent) !important;
    color: var(--bcl-accent-hover) !important;
}

/* ============ НАВИГАЦИЯ / HEADER ============ */
.navbar,
.nav,
.header-navigation,
.top-nav,
.header-wrapper,
.menu,
header {
    background-color: var(--bcl-bg-2) !important;
    border-bottom: 1px solid var(--bcl-border) !important;
    color: var(--bcl-text) !important;
}

.nav-link,
.navbar-nav .nav-link,
.menu-link {
    color: var(--bcl-text-muted) !important;
}
.nav-link:hover,
.nav-link.active,
.menu-link:hover,
.menu-link.active {
    color: var(--bcl-accent-hover) !important;
}

/* ============ PARTICLES BG ============ */
#particles-js {
    background-color: var(--bcl-bg) !important;
    background-image: none !important;
}

/* ============ ФОРМЫ ============ */
input, textarea, select, .form-control {
    background-color: var(--bcl-surface) !important;
    border: 1px solid var(--bcl-border) !important;
    color: var(--bcl-text) !important;
    border-radius: 10px !important;
}
input::placeholder, textarea::placeholder {
    color: var(--bcl-text-dim) !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
    border-color: var(--bcl-accent) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18) !important;
    outline: none !important;
}

/* ============ FOOTER ============ */
footer,
.footer,
.landing-footer {
    background-color: var(--bcl-bg-2) !important;
    border-top: 1px solid var(--bcl-border) !important;
    color: var(--bcl-text-muted) !important;
}
footer a, .footer a { color: var(--bcl-text-muted) !important; }
footer a:hover, .footer a:hover { color: var(--bcl-accent-hover) !important; }

/* ============ CURVE DIVIDERS ============ */
.curve,
[class*="curve-"],
[class*="divider"] {
    background-image: none !important;
    background-color: transparent !important;
    border-color: var(--bcl-border) !important;
}

/* ============ ТАБЛИЦЫ ============ */
table {
    background-color: transparent !important;
    color: var(--bcl-text) !important;
}
table th {
    background-color: transparent !important;
    color: var(--bcl-text-muted) !important;
    border-bottom: 1px solid var(--bcl-border) !important;
}
table td {
    border-top: 1px solid var(--bcl-border) !important;
}

/* ============ БЭЙДЖИ / ЦЕННИКИ ============ */
.badge,
.label,
.tag,
.price-tag {
    background-color: var(--bcl-accent-soft) !important;
    color: var(--bcl-accent-hover) !important;
    border: 1px solid var(--bcl-border-accent) !important;
    border-radius: 999px !important;
}

/* ============ CODE BLOCKS (railscasts — оставляем, но тоном в тему) ============ */
pre, code {
    background-color: var(--bcl-bg-2) !important;
    border: 1px solid var(--bcl-border) !important;
    border-radius: 10px !important;
    color: var(--bcl-text) !important;
}

/* ============ SEPARATORS / HR ============ */
hr, .separator {
    border-color: var(--bcl-border) !important;
    background-color: transparent !important;
}

/* ============ SCROLLBAR ============ */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: #2E2842;
    border-radius: 10px;
    border: 2px solid var(--bcl-bg);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--bcl-accent); }

/* ============ HEADER-BRAND / LOGO блоки ============ */
.header-brand img,
.landing-logo img {
    filter: none !important;
}

/* ============ СЕКЦИЯ "WHY IS BEECLICK..." (block-dark / dark-outline) ============ */
.block-dark,
.dark-top-curved-bg,
.dark-bottom-curved-bg {
    background-color: var(--bcl-bg) !important;
    background-image: none !important;
}

.dark-outline {
    background-color: var(--bcl-surface) !important;
    border: 1px solid var(--bcl-border) !important;
    color: var(--bcl-text) !important;
    box-shadow: 0 6px 24px -10px rgba(0,0,0,0.6) !important;
    border-radius: 14px !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.dark-outline:hover {
    border-color: var(--bcl-border-accent) !important;
    box-shadow: 0 10px 32px -10px rgba(139, 92, 246, 0.35) !important;
    transform: translateY(-2px);
}
.dark-outline h3,
.dark-outline .text-success {
    color: var(--bcl-accent-hover) !important;
}
.dark-outline .font-size-3,
.dark-outline div {
    color: var(--bcl-text-muted) !important;
}

/* .text-success в оригинале — зелёный. На лендинге превращаем в фиолет */
.text-success { color: var(--bcl-accent-hover) !important; }
.bg-success {
    background-color: var(--bcl-accent) !important;
    color: #fff !important;
}
.btn-success {
    background-color: var(--bcl-accent) !important;
    border-color: var(--bcl-accent) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px -10px rgba(139, 92, 246, 0.7) !important;
}
.btn-success:hover {
    background-color: var(--bcl-accent-hover) !important;
    border-color: var(--bcl-accent-hover) !important;
}

/* text-dark-60 / text-dark-50 — приглушённые описания */
.text-dark-60, .text-dark-50, .text-dark-75 {
    color: var(--bcl-text-muted) !important;
}
.text-hover-primary:hover { color: var(--bcl-accent-hover) !important; }

.text-white, h1.text-white, h2.text-white { color: var(--bcl-text-strong) !important; }

/* ============ SELECTION ============ */
::selection {
    background-color: var(--bcl-accent-soft);
    color: var(--bcl-text-strong);
}