@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=PT+Sans:wght@400;700&display=swap");

/* ==========================================================================
   BADLAND — стиль магазина EasyDonate (тема lullaby-dark)
   Постапокалипсис: ржавый металл, сигнальный жёлтый, трафаретные заголовки.
   Цвета меняются в одном месте — в блоке :root ниже.
   ========================================================================== */

:root {
    --bl-bg: #0d0e0b;            /* фон страницы */
    --bl-bg-2: #13150f;          /* фон секций */
    --bl-panel: #1a1c15;         /* карточки, окна */
    --bl-panel-2: #22251b;       /* поля ввода, плашки */
    --bl-line: #33382a;          /* рамки */
    --bl-line-2: #4a5139;        /* рамки при наведении */
    --bl-text: #e2e4d6;          /* основной текст */
    --bl-dim: #979d86;           /* второстепенный текст */
    --bl-accent: #e8b22a;        /* сигнальный жёлтый */
    --bl-accent-2: #ffd24a;      /* жёлтый при наведении */
    --bl-accent-ink: #15130a;    /* текст на жёлтом */
    --bl-rust: #b9532b;          /* ржавчина: скидки, опасное */
    --bl-green: #9bbf5c;         /* «в корзину», подтверждения */
    --bl-head: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --bl-body: "PT Sans", "Segoe UI", Roboto, Arial, sans-serif;
    --bl-cut: 14px;              /* срез угла у карточек */

    /* цвета самой темы */
    --accent-color: #e8b22a;
    --accent-muted: #e8b22a75;
    --accent-neutral: #e8b22a50;
    --primary: #e8b22a;
    --secondary: #e8b22a;
}

/* ---------- основа ---------- */

html { scroll-behavior: smooth; }

body {
    background: var(--bl-bg) !important;
    color: var(--bl-text);
    font-family: var(--bl-body);
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4 {
    font-family: var(--bl-head);
    letter-spacing: 0.04em;
}

a { transition: color .15s ease; }

::selection { background: var(--bl-accent); color: var(--bl-accent-ink); }

::-webkit-scrollbar { width: 10px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bl-bg); }
::-webkit-scrollbar-thumb { background: var(--bl-line-2); border: 2px solid var(--bl-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--bl-accent); }

.bg-elegant { background-color: var(--bl-panel) !important; }
.bg-elegant-dark { background-color: var(--bl-bg-2) !important; }
.bg-elegant-night { background-color: #0a0b08 !important; }
.fill-elegant { fill: var(--bl-panel); }
.fill-elegant-dark { fill: var(--bl-bg-2); }

.text-success { color: var(--bl-green) !important; }
.text-danger { color: #e0714f !important; }
.text-secondary { color: var(--bl-accent) !important; }
.text-muted { color: var(--bl-dim) !important; }
a.text-secondary:hover { color: var(--bl-accent-2) !important; }

.stripe-loading-indicator .stripe,
.stripe-loading-indicator .stripe-loaded { background: var(--bl-accent) !important; }

/* ---------- верхнее меню ---------- */

.navbar-main {
    padding-top: 14px;
    padding-bottom: 14px;
    background: linear-gradient(180deg, rgba(8, 9, 6, 0.92) 0%, rgba(8, 9, 6, 0) 100%) !important;
}

.navbar-main .navbar-brand img {
    height: 46px;
    width: 46px;
    object-fit: cover;
    border: 2px solid var(--bl-accent);
    border-radius: 0;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
}

.navbar-main .nav-link {
    font-family: var(--bl-head);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bl-text) !important;
    padding: 8px 14px !important;
    border-bottom: 2px solid transparent;
}

.navbar-main .nav-link i { color: var(--bl-accent); margin-right: 6px; }

.navbar-main .nav-link:hover {
    color: var(--bl-accent-2) !important;
    border-bottom-color: var(--bl-accent);
}

.navbar-collapse-header img { border: 2px solid var(--bl-accent); }

@media (max-width: 991.98px) {
    .navbar-main .navbar-collapse {
        background: var(--bl-panel) !important;
        border: 1px solid var(--bl-line);
        border-radius: 0 !important;
    }
}

/* ---------- шапка с названием ---------- */

#welcome-section {
    position: relative;
    background-position: center !important;
    border-bottom: 1px solid #000;
}

/* затемнение и тёплый тон вместо синего */
#welcome-section.overlay-dark:before {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(13, 14, 11, 0.15) 0%, rgba(13, 14, 11, 0.82) 78%),
        linear-gradient(180deg, rgba(13, 14, 11, 0.55) 0%, rgba(13, 14, 11, 0.35) 45%, #0d0e0b 100%);
    opacity: 1;
}

/* полоса «опасная зона» под шапкой */
#welcome-section:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    z-index: 3;
    background: repeating-linear-gradient(-45deg, var(--bl-accent) 0 18px, #14150f 18px 36px);
    box-shadow: 0 -1px 0 #000, 0 6px 18px rgba(0, 0, 0, 0.6);
}

#welcome-section .pattern { display: none; }

.shop-title { padding-top: 7rem !important; padding-bottom: 6rem !important; }

.shop-name {
    font-family: var(--bl-head);
    font-weight: 700 !important;
    font-size: clamp(3.4rem, 11vw, 8rem);
    line-height: 0.95 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bl-text);
    text-shadow: 0 2px 0 #000, 0 0 34px rgba(232, 178, 42, 0.28);
    margin-bottom: 1.4rem !important;
}

.shop-description {
    display: inline-block;
    font-family: var(--bl-head);
    font-size: clamp(1rem, 2.4vw, 1.5rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bl-accent-ink);
    background: var(--bl-accent);
    padding: 8px 22px 8px 26px;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.general-online {
    font-family: var(--bl-head);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bl-green);
    margin-bottom: 1rem;
}

/* ---------- заголовок раздела и поиск ---------- */

main.bg-elegant-dark,
#sections.bg-elegant-dark {
    background:
        radial-gradient(1200px 500px at 50% 0, rgba(232, 178, 42, 0.05), transparent 70%),
        var(--bl-bg) !important;
}

main > section.section-md { padding-top: 4rem !important; }

main .container > .d-flex > h2 {
    position: relative;
    font-size: 2.2rem;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-left: 18px;
    color: var(--bl-text);
}

main .container > .d-flex > h2:before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 6px;
    background: var(--bl-accent);
}

.form-control,
.form-control.bg-elegant,
.form-control.bg-elegant-dark {
    background: var(--bl-panel-2) !important;
    color: var(--bl-text) !important;
    border: 1px solid var(--bl-line) !important;
    border-radius: 0 !important;
    font-family: var(--bl-body);
    box-shadow: none !important;
}

.form-control::placeholder { color: var(--bl-dim); opacity: 1; }

.form-control:focus { border-color: var(--bl-accent) !important; }

.input-group-text,
.input-group-text.bg-elegant,
.input-group-text.bg-elegant-dark {
    background: var(--bl-panel-2) !important;
    color: var(--bl-accent) !important;
    border: 1px solid var(--bl-line) !important;
    border-radius: 0 !important;
}

.input-group-prepend .input-group-text { border-right: 0 !important; }
.input-group-append .input-group-text { border-left: 0 !important; }

/* ---------- категории ---------- */

.filter-button-group { margin-top: 2rem !important; }

.filter-button {
    font-family: var(--bl-head);
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em;
    color: var(--bl-dim) !important;
    background: transparent !important;
    border: 1px solid var(--bl-line);
    border-radius: 0 !important;
    padding: 9px 16px !important;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.filter-button i { color: var(--bl-line-2); }

.filter-button:hover {
    color: var(--bl-text) !important;
    border-color: var(--bl-accent);
}

.filter-button:hover i { color: var(--bl-accent); }

.filter-button.active {
    color: var(--bl-accent-ink) !important;
    background: var(--bl-accent) !important;
    border-color: var(--bl-accent);
}

.filter-button.active i { color: var(--bl-accent-ink); }

/* ---------- карточки товаров ---------- */

.profile-card > .card {
    position: relative;
    margin-top: 1.25rem !important;
    background: linear-gradient(135deg, #1d2017 0%, #15170f 100%) !important;
    border: 1px solid var(--bl-line) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - var(--bl-cut)) 0, 100% var(--bl-cut), 100% 100%, var(--bl-cut) 100%, 0 calc(100% - var(--bl-cut)));
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

/* жёлтая полоса слева появляется при наведении */
.profile-card > .card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 5;
    background: var(--bl-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .2s ease;
}

.profile-card > .card:hover {
    transform: translateY(-3px);
    border-color: var(--bl-accent) !important;
    background: linear-gradient(135deg, #23261a 0%, #181a11 100%) !important;
}

.profile-card > .card:hover:before { transform: scaleY(1); }

.profile-card > .card > a[data-request="onRenderProduct"] { cursor: pointer; display: block; color: inherit; }

.profile-card .card-image {
    border-right: 1px solid var(--bl-line);
    min-height: 170px !important;
    filter: saturate(0.82) contrast(1.05);
    transition: filter .2s ease;
}

.profile-card .card-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 14, 11, 0) 55%, rgba(21, 23, 15, 0.9) 100%);
}

.profile-card > .card:hover .card-image { filter: none; }

.profile-card .card .card { border-radius: 0 !important; }

.profile-card .card-header { background: transparent !important; padding: 16px 20px 6px; }

.badge-active,
.profile-card .badge {
    font-family: var(--bl-head);
    font-size: 11px;
    font-weight: 500 !important;
    letter-spacing: 0.14em;
    color: var(--bl-dim) !important;
    background: transparent !important;
    border: 1px solid var(--bl-line);
    border-radius: 0 !important;
    padding: 4px 9px;
}

.badge-active i { color: var(--bl-accent) !important; }
.badge-active:hover { color: var(--bl-text) !important; }

.profile-card .card-body { padding-left: 20px; padding-right: 54px; }

.profile-card .card-title {
    font-size: 1.45rem;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bl-text);
    margin-bottom: 0;
}

.profile-card .card-footer { padding: 10px 20px 18px !important; }

.profile-card .card-footer h6 {
    font-family: var(--bl-head);
    font-size: 1.25rem;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    color: var(--bl-accent);
}

/* кнопка «в корзину» в углу карточки */
.profile-card > .card > a[data-request="onAdd"] {
    top: 12px !important;
    right: 14px !important;
    margin: 0 !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 14, 11, 0.7);
    border: 1px solid var(--bl-line-2);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.profile-card > .card > a[data-request="onAdd"] .btn-inner-icon { color: var(--bl-green) !important; }

.profile-card > .card > a[data-request="onAdd"]:hover {
    background: var(--bl-accent);
    border-color: var(--bl-accent);
}

.profile-card > .card > a[data-request="onAdd"]:hover .btn-inner-icon { color: var(--bl-accent-ink) !important; }

/* скидка */
.sale { border-radius: 0; box-shadow: none; font-family: var(--bl-head); letter-spacing: 0.06em; }
.sale__size { background: var(--bl-rust); border-radius: 0; }
.sale__timer { background: #8f3f20; border-radius: 0; }

/* заглушки на время загрузки */
.skeleton-box { background-color: var(--bl-panel-2); border-radius: 0; }
.skeleton-box::after { border-radius: 0; background-image: linear-gradient(90deg, transparent 0, rgba(232, 178, 42, 0.08) 40%, transparent 80%); }

/* ---------- окна: товар, корзина, сервер ---------- */

.modal-backdrop { background-color: #050604; }
.modal-backdrop.show { opacity: 0.82; }

.modal-content.bg-elegant {
    background: var(--bl-panel) !important;
    border: 1px solid var(--bl-line) !important;
    border-top: 3px solid var(--bl-accent) !important;
    border-radius: 0 !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    color: var(--bl-text);
    overflow: hidden;
}

.modal-content.bg-elegant .modal-header {
    background: #10110c !important;
    border-bottom: 1px solid var(--bl-line) !important;
    border-radius: 0;
    align-items: center;
}

.modal-content.bg-elegant .modal-header .modal-title {
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bl-dim) !important;
}

.modal-content.bg-elegant .close { opacity: 0.7; text-shadow: none; }
.modal-content.bg-elegant .close:hover { opacity: 1; }
.modal-content.bg-elegant .close:hover span { color: var(--bl-accent) !important; }

.product-modal .modal-body { padding: 22px 26px; font-size: 16px; line-height: 1.6; color: var(--bl-text) !important; }

.product-modal .card-image img {
    width: 200px;
    max-width: 100%;
    border: 1px solid var(--bl-line);
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.25);
}

.product-modal h3.modal-title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bl-text);
}

.product-modal .modal-body h5 {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--bl-accent);
    border-top: 1px solid var(--bl-line);
    border-bottom: 1px solid var(--bl-line);
    padding: 6px 22px;
}

.product-modal .my-3 { color: #c9ccbc; }

.modal-content.bg-elegant .modal-footer {
    background: #10110c !important;
    border-top: 1px solid var(--bl-line) !important;
    border-radius: 0;
    padding: 16px;
}

.groupped-product { border: 1px solid var(--bl-line); }
.groupped-product:hover { border-color: var(--bl-line-2); }
.groupped-product.selected { border-color: var(--bl-accent); background: rgba(232, 178, 42, 0.06); }

/* ---------- кнопки ---------- */

.btn { border-radius: 0 !important; font-family: var(--bl-head); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: none !important; }

.btn-secondary,
.btn-primary,
.btn.text-white.btn-secondary {
    background: var(--bl-accent) !important;
    border: 1px solid var(--bl-accent) !important;
    color: var(--bl-accent-ink) !important;
    font-weight: 600;
    padding: 11px 26px;
    transition: background .15s ease, transform .15s ease;
}

.btn-secondary:hover,
.btn-primary:hover,
.btn-secondary:focus,
.btn-primary:focus {
    background: var(--bl-accent-2) !important;
    border-color: var(--bl-accent-2) !important;
    color: var(--bl-accent-ink) !important;
}

.btn-secondary .btn-inner-icon,
.btn-secondary .btn-inner-text { color: var(--bl-accent-ink) !important; }

.btn.disabled,
.btn:disabled {
    background: var(--bl-panel-2) !important;
    border: 1px solid var(--bl-line) !important;
    color: var(--bl-dim) !important;
}

/* ---------- корзина ---------- */

.cart-content .col-lg-7.bg-elegant-dark,
.cart-content .col-12.bg-elegant-dark { background: #121410 !important; }

.cart-content h3 { letter-spacing: 0.1em; text-transform: uppercase; }

.cart-content h2 { color: var(--bl-accent); font-weight: 600 !important; }

.cart-content [style*="dashed"] { border-bottom-color: var(--bl-line-2) !important; }

.cart-products .fa-cogs { color: var(--bl-line-2) !important; }
.cart-products .text-small { color: var(--bl-dim) !important; letter-spacing: 0.12em; }

.cart-content .alert-warning {
    background: rgba(232, 178, 42, 0.08);
    color: var(--bl-text);
    border: 1px solid rgba(232, 178, 42, 0.35);
    border-left: 4px solid var(--bl-accent);
    font-size: 14px;
    line-height: 1.5;
}

.cart-content .alert-warning i,
.cart-content .alert-warning strong { color: var(--bl-accent); }

.cart-content .form-check-label { color: var(--bl-dim); font-size: 14px; }

.cart-content .form-check .form-check-sign::before { border-color: var(--bl-line-2); border-radius: 0; background: var(--bl-panel-2); }
.cart-content .form-check input:checked + .form-check-sign::before { background: var(--bl-accent); border-color: var(--bl-accent); }
.cart-content .form-check .form-check-sign::after { color: var(--bl-accent-ink); }

.cart-content a.text-danger { font-family: var(--bl-head); letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; }

/* ---------- кнопка корзины в углу ---------- */

.basket-button {
    background: var(--bl-accent) !important;
    color: var(--bl-accent-ink) !important;
    border-radius: 0 !important;
    width: 56px;
    height: 56px;
    line-height: 26px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6), 0 10px 24px rgba(0, 0, 0, 0.55);
    transition: background .15s ease, transform .15s ease;
}

.basket-button:hover { background: var(--bl-accent-2) !important; transform: translateY(-2px); }

.basket-button i { font-size: 20px; }

.basket-button .badge {
    background: var(--bl-rust) !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-family: var(--bl-head);
    font-size: 12px;
    top: -8px !important;
    right: -8px !important;
    padding: 3px 7px;
}

/* ---------- последние покупки и прочие блоки ---------- */

#sections .card { background: var(--bl-panel) !important; border: 1px solid var(--bl-line) !important; border-radius: 0 !important; }
#sections h2, #sections .h1 { text-transform: uppercase; letter-spacing: 0.1em; }

/* ---------- подвал ---------- */

footer.footer {
    background: #090a07 !important;
    border-top: 1px solid var(--bl-line);
    color: var(--bl-dim) !important;
}

footer.footer .footer-brand img {
    height: 44px;
    width: 44px;
    object-fit: cover;
    border: 1px solid var(--bl-line-2);
    filter: grayscale(0.35);
}

footer.footer p { color: var(--bl-dim); }
footer.footer a[href*="easydonate"] { color: var(--bl-accent) !important; }
footer.footer #footer-social-links a { color: var(--bl-dim); }
footer.footer #footer-social-links a:hover { color: var(--bl-accent); }

/* ---------- подсказки и всплывающие сообщения ---------- */

.tooltip-inner { background: #0a0b08; color: var(--bl-text); border: 1px solid var(--bl-line-2); border-radius: 0; font-family: var(--bl-body); }
.tooltip .arrow::before { border-top-color: var(--bl-line-2); border-bottom-color: var(--bl-line-2); }

p.flash-message,
.alert.alert-success,
.alert.alert-danger,
.alert.alert-info {
    border-radius: 0 !important;
    border: 1px solid var(--bl-line-2) !important;
    border-left: 4px solid var(--bl-accent) !important;
    background: #12140e !important;
    color: var(--bl-text) !important;
    font-family: var(--bl-body);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

p.flash-message.error,
.alert.alert-danger { border-left-color: var(--bl-rust) !important; }

/* ---------- телефон ---------- */

@media (max-width: 575.98px) {
    .shop-title { padding-top: 6rem !important; padding-bottom: 4.5rem !important; }
    .shop-description { letter-spacing: 0.18em; }
    main .container > .d-flex { flex-direction: column; }
    main .container > .d-flex > h2 { margin-bottom: 1rem !important; }
    .profile-card .card-image { border-right: 0; border-bottom: 1px solid var(--bl-line); }
    .profile-card .card-image:after { background: linear-gradient(180deg, rgba(13, 14, 11, 0) 55%, rgba(21, 23, 15, 0.9) 100%); }
    .profile-card .card-header { padding-top: 14px; }
    .filter-button { padding: 8px 12px !important; }
}