﻿/* ======================================================
   FOREST / OLIVE + BRASS DESIGN SYSTEM
   Premium Dark – Bottle Green + Brass
   ====================================================== */

:root {
    /* ===== Background & Text (deep forest, not too dark) ===== */
    --bs-body-bg: #151b18; /* bardzo ciemna zieleń (nie czarna) */
    --bs-body-color: #e7e6e0; /* ciepła jasna typografia */

    --text-muted-custom: #b7b3a6;
    /* ===== Brass Accent (mosiądz) ===== */
    --brass: #c6a15b; /* mosiądz */
    --brass-rgb: 198,161,91;
    --brass-dark: #a98645;
    --brass-light: #e0c07a;
    /* ===== Olive secondary accent ===== */
    --olive: #6f7b45; /* oliwka */
    --olive-rgb: 111,123,69;
    /* ===== Surfaces ===== */
    --surface-1: #1d2520; /* panele/karty */
    --surface-2: #263129; /* hover/pill */

    --bs-border-color: rgba(255,255,255,.09);
    /* ===== Shape & Shadow ===== */
    --radius-xl: 1.25rem;
    --shadow-soft: 0 12px 35px rgba(0,0,0,.35);
    --shadow-strong: 0 25px 80px rgba(0,0,0,.55);
}

/* ======================================================
   GLOBAL
   ====================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
}

.text-muted {
    color: var(--text-muted-custom) !important;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1;
}

/* ======================================================
   NAVBAR
   ====================================================== */

.navbar-premium {
    backdrop-filter: blur(16px);
    background: rgba(21,27,24,.85);
    border-bottom: 1px solid var(--bs-border-color);
}

.brand-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--brass);
    display: inline-block;
    margin-right: .5rem;
    box-shadow: 0 0 0 4px rgba(198,161,91,.14);
}

.navbar .nav-link {
    color: var(--text-muted-custom);
    transition: color .2s ease;
}

    .navbar .nav-link:hover {
        color: var(--bs-body-color);
    }

/* ======================================================
   HERO
   ====================================================== */

.hero {
    position: relative;
    overflow: hidden;
}

.min-vh-80 {
    min-height: 80vh;
}

.hero-bg {
    background: radial-gradient(900px 520px at 12% 12%, rgba(198,161,91,.18), transparent 62%), radial-gradient(900px 620px at 88% 18%, rgba(111,123,69,.14), transparent 64%), radial-gradient(900px 620px at 55% 85%, rgba(255,255,255,.05), transparent 60%), linear-gradient(180deg, #151b18, #151b18);
}

.hero-card {
    border-radius: var(--radius-xl);
    padding: 2rem;
    background: rgba(29,37,32,.88);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-soft);
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    color: var(--text-muted-custom);
    margin-bottom: .75rem;
}

.hero-meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.meta-pill {
    font-size: .85rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: rgba(38,49,41,.75);
}

.hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.42));
}

.hero-bg-full {
    background-image: var(--hero-bg-desktop);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Bootstrap lg breakpoint: < 992px */
@media (max-width: 991.98px) {
    .hero-bg-full {
        background-image: var(--hero-bg-mobile, var(--hero-bg-desktop));
        background-position: center;
    }
}

/* ======================================================
   PANELS
   ====================================================== */

.panel {
    border-radius: var(--radius-xl);
    border: 1px solid var(--bs-border-color);
    background: rgba(29,37,32,.86);
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
}

/* ======================================================
   CARDS
   ====================================================== */

.card-premium {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    background: rgba(29,37,32,.86);
    box-shadow: var(--shadow-soft);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .card-premium:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-strong);
        border-color: rgba(198,161,91,.32);
    }

.card-premium-thumb {
    height: 180px;
    background: radial-gradient(900px 320px at 20% 20%, rgba(198,161,91,.22), transparent 55%), radial-gradient(800px 360px at 80% 30%, rgba(111,123,69,.14), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.00));
}

/* ======================================================
   MINI CARDS
   ====================================================== */

.mini-card {
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color);
    padding: 1rem;
    background: rgba(38,49,41,.70);
    transition: transform .2s ease, border-color .2s ease;
}

    .mini-card:hover {
        transform: translateY(-2px);
        border-color: rgba(198,161,91,.22);
    }

.mini-title {
    font-weight: 600;
    margin-bottom: .25rem;
}

/* ======================================================
   BUTTONS – BRASS (no blue)
   ====================================================== */

.btn-primary {
    background: linear-gradient(180deg, var(--brass-light), var(--brass));
    border: 1px solid rgba(198,161,91,.45);
    color: #151b18;
    box-shadow: 0 10px 30px rgba(198,161,91,.22);
}

    .btn-primary:hover {
        background: linear-gradient(180deg, var(--brass-light), var(--brass-dark));
        box-shadow: 0 14px 40px rgba(198,161,91,.30);
        color: #151b18;
    }

.btn-outline-secondary {
    border-color: rgba(255,255,255,.16);
    color: var(--text-muted-custom);
}

    .btn-outline-secondary:hover {
        background: rgba(38,49,41,.75);
        color: var(--bs-body-color);
    }

/* Optional: Olive button (secondary CTA) */
.btn-olive {
    background: linear-gradient(180deg, rgba(111,123,69,1), rgba(86,98,54,1));
    border: 1px solid rgba(111,123,69,.45);
    color: #0f1311;
    box-shadow: 0 10px 30px rgba(111,123,69,.20);
}

    .btn-olive:hover {
        filter: brightness(1.04);
        box-shadow: 0 14px 40px rgba(111,123,69,.26);
        color: #0f1311;
    }

/* ======================================================
   FOOTER
   ====================================================== */

.app-footer {
    background: rgba(29,37,32,.86);
    border-top: 1px solid var(--bs-border-color);
}

/* HERO IMAGE WITH SOFT FADE */

/* ======================================================
   HERO – FULL BACKGROUND IMAGE
   ====================================================== */

.hero-bg-full {
    position: relative;
    overflow: hidden;
    /*background-image: url('/images/hero.png');*/
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    /* 🔥 kluczowe */
    filter: brightness(1.35) contrast(1.1);
}


    /* Overlay poprawiający czytelność tekstu */

    .hero-bg-full::before {
        content: "";
        position: absolute;
        inset: 0;
        /* ciemniejszy gradient od prawej */
        background: linear-gradient( 90deg, rgba(21,27,24,.2) 0%, rgba(21,27,24,.45) 40%, rgba(21,27,24,.85) 70%, rgba(21,27,24,.95) 100% );
    }

/* karta tekstowa pół-transparentna */

.hero-card-overlay {
    background: rgba(29,37,32,.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* Mobile */

@media (max-width: 991px) {

    .hero-bg-full {
        background-position: center;
    }

        .hero-bg-full::before {
            background: linear-gradient( 180deg, rgba(21,27,24,.85) 0%, rgba(21,27,24,.75) 50%, rgba(21,27,24,.9) 100% );
        }

    .hero-card-overlay {
        background: rgba(29,37,32,.92);
    }
}

.public-article-content {
    line-height: 1.75;
    font-size: 1.05rem;
}

    .public-article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .public-article-content h1,
    .public-article-content h2,
    .public-article-content h3 {
        margin-top: 1.4rem;
        margin-bottom: .65rem;
    }

    .public-article-content p {
        margin-bottom: 1rem;
    }

    .public-article-content blockquote {
        padding: .75rem 1rem;
        border-left: 4px solid rgba(0,0,0,.15);
        background: rgba(0,0,0,.03);
        border-radius: 12px;
    }

/* =========================================================
   PREMIUM ARTICLE: header split + actions aside
   ========================================================= */

.ha-article-premium {
    padding: 30px 0 70px;
}

.ha-article-container {
    max-width: 1120px;
}

/* Header row */
.ha-header-row {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 34px;
}

.ha-header-title h1 {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0;
}

.ha-meta {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    opacity: .8;
}

.ha-pill {
    display: inline-flex;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    font-weight: 650;
}

.ha-dot {
    opacity: .6;
}

.ha-header-media img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    display: block;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}

.ha-media-frame {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}

/* Body grid: content + actions */
.ha-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 34px;
    align-items: start;
}

.ha-content {
    max-width: 78ch;
    font-size: 1.08rem;
    line-height: 1.85;
}

    /* content typography */
    .ha-content h2 {
        font-size: 1.6rem;
        margin-top: 2rem;
        margin-bottom: .75rem;
    }

    .ha-content h3 {
        font-size: 1.3rem;
        margin-top: 1.6rem;
        margin-bottom: .65rem;
    }

    .ha-content p {
        margin-bottom: 1.05rem;
    }

    .ha-content img {
        max-width: 100%;
        height: auto;
        border-radius: 14px;
    }

/* Actions aside */
.ha-actions {
    position: sticky;
    top: 16px;
}

.ha-actions-card {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    padding: 14px;
}

.ha-actions-title {
    font-size: .9rem;
    font-weight: 750;
    opacity: .9;
    margin-bottom: 10px;
}

.ha-actions-sep {
    height: 1px;
    background: rgba(255,255,255,.10);
    margin: 14px 0;
}

.ha-actions-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .9rem;
}

.ha-actions-label {
    opacity: .75;
}

.ha-actions-value {
    opacity: .95;
    font-weight: 650;
}

/* Responsive */
@media (max-width: 992px) {
    .ha-header-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ha-body-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ha-actions {
        position: static;
        order: 2;
    }

    .ha-content {
        max-width: 100%;
    }
}

/* Toast (reuse) */
.ha-toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    font-size: .95rem;
    z-index: 9999;
}

/* =========================================================
   Premium Articles List (public) – dark friendly
   ========================================================= */

.ha-list {
    padding: 28px 0 70px;
}

.ha-article-container {
    max-width: 1120px;
}

.ha-list-hero {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ha-list-title {
    margin: 0;
    font-weight: 850;
    letter-spacing: -.02em;
    font-size: clamp(2.0rem, 3.2vw, 2.8rem);
}

.ha-list-subtitle {
    opacity: .78;
    margin-top: 6px;
}

.ha-search {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ha-search-input {
    min-width: 260px;
    border-radius: 14px;
}

.ha-search-btn {
    border-radius: 14px;
}

/* filter chips */
.ha-filterbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 22px;
}

.ha-chip {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.88);
    padding: .38rem .7rem;
    border-radius: 999px;
    font-weight: 650;
    font-size: .92rem;
}

    .ha-chip:hover {
        background: rgba(255,255,255,.07);
    }

    .ha-chip.active {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.18);
    }

/* meta */
.ha-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: .88;
}

.ha-meta-small {
    font-size: .9rem;
}

.ha-pill {
    display: inline-flex;
    padding: .22rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    font-weight: 650;
}

.ha-dot {
    opacity: .55;
}

.ha-badge {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    padding: .14rem .45rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
}

/* featured card */
.ha-featured {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 0;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    margin-bottom: 18px;
}

    .ha-featured:hover {
        background: rgba(255,255,255,.06);
    }

.ha-featured-media {
    position: relative;
    min-height: 260px;
}

    .ha-featured-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ha-featured-body {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ha-featured-title {
    font-weight: 850;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-size: 1.55rem;
    color: rgba(255,255,255,.96);
}

.ha-featured-excerpt {
    opacity: .85;
    line-height: 1.65;
    color: rgba(255,255,255,.86);
}

.ha-readmore {
    margin-top: auto;
    font-weight: 750;
    opacity: .9;
}

/* grid cards */
.ha-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 10px;
}

.ha-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
}

    .ha-card:hover {
        background: rgba(255,255,255,.06);
    }

.ha-card-media {
    height: 170px;
    background: rgba(255,255,255,.04);
}

    .ha-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ha-card-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ha-card-title {
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.18;
    color: rgba(255,255,255,.96);
}

.ha-card-excerpt {
    opacity: .84;
    line-height: 1.6;
    color: rgba(255,255,255,.86);
}

/* placeholder */
.ha-media-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: .14em;
    opacity: .55;
}

/* pager */
.ha-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.10);
}

.ha-pager-info {
    opacity: .82;
    text-align: center;
}

/* responsive */
@media (max-width: 992px) {
    .ha-featured {
        grid-template-columns: 1fr;
    }

    .ha-featured-media {
        min-height: 220px;
    }

    .ha-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .ha-search {
        width: 100%;
    }

    .ha-search-input {
        flex: 1;
        min-width: 0;
    }

    .ha-grid {
        grid-template-columns: 1fr;
    }
}

.ha-article-grid {
    display: grid;
    gap: 1.5rem;
}

/* KLUCZ: dzieci gridu muszą móc się zwężać */
.ha-article-left,
.ha-article-right {
    min-width: 0;
}

@media (min-width: 992px) {
    .ha-article-grid {
        /* KLUCZ: minmax(0, 1fr) zamiast 1fr */
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: start;
    }

    .ha-right-sticky {
        position: sticky;
        top: 92px;
    }
}

.ha-media-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
/* Lightbox (public) */
.ha-lb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.80);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.ha-lb-modal {
    width: min(1200px, 96vw);
    max-height: 92vh;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(15,15,15,.86);
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 120px rgba(0,0,0,.55);
    display: flex;
    flex-direction: column;
}

.ha-lb-header {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ha-lb-body {
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

.ha-lb-imgwrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ha-lb-imgwrap img {
        max-width: 100%;
        max-height: 74vh;
        object-fit: contain;
        border-radius: 14px;
    }

.ha-lb-navbtn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ha-lb-navbtn:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

.ha-lb-footer {
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ha-lb-caption {
    color: rgba(255,255,255,.75);
    max-width: 75ch;
}

/* ===== SOCIAL FLOAT ICONS ===== */

.ha-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ha-social-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--ha-text, #d7d7d7);
    font-size: 1.1rem;
    transition: all 0.25s ease;
    text-decoration: none;
}

    .ha-social-btn:hover {
        transform: translateY(-3px);
        background: rgba(212, 175, 55, 0.15);
        border-color: rgba(212, 175, 55, 0.35);
        color: #d4af37;
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    }

.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 520px;
    margin: auto;
    background: rgba(25, 28, 30, 0.92);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 14px 18px;
    z-index: 2000;
}

.cookie-inner {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.cookie-text {
    font-size: 0.85rem;
    color: #cfcfcf;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 5000;
    pointer-events: none;
}

    #blazor-error-ui .ha-error-box {
        max-width: 420px;
        margin: auto;
        background: rgba(25, 28, 30, 0.95);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(200, 169, 106, 0.35);
        border-radius: 10px;
        padding: 12px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        color: #d2d2d2;
        font-size: 0.85rem;
        pointer-events: auto;
    }

.ha-error-text {
    opacity: 0.9;
}

.ha-error-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ha-error-reload {
    color: #c8a96a;
    text-decoration: none;
    font-weight: 500;
}

    .ha-error-reload:hover {
        text-decoration: underline;
    }

.ha-error-close {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 14px;
}

/* HEROARTIST – Cookie toast (premium) */

.ha-cookie-toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 10050;
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(18, 20, 22, 0.78);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(200, 169, 106, 0.26);
    box-shadow: 0 14px 38px rgba(0,0,0,0.40), inset 0 0 0 1px rgba(255,255,255,0.03);
    transform: translateY(14px);
    opacity: 0;
    animation: haCookieIn .28s ease-out forwards;
}

@keyframes haCookieIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ha-cookie-toast.is-hiding {
    animation: haCookieOut .22s ease-in forwards;
}

@keyframes haCookieOut {
    to {
        transform: translateY(12px);
        opacity: 0;
    }
}

.ha-cookie-toast__row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: start;
}

.ha-cookie-toast__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c8a96a;
    background: rgba(200, 169, 106, 0.12);
    border: 1px solid rgba(200, 169, 106, 0.22);
    font-size: 18px;
}

.ha-cookie-toast__title {
    font-weight: 700;
    letter-spacing: .2px;
    color: rgba(255,255,255,0.92);
    margin-top: 1px;
}

.ha-cookie-toast__text {
    margin-top: 4px;
    font-size: 0.88rem;
    line-height: 1.35;
    color: rgba(255,255,255,0.72);
}

.ha-cookie-toast__actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ha-cookie-toast__link {
    color: rgba(200, 169, 106, 0.95);
    text-decoration: none;
    font-size: 0.88rem;
    margin-right: auto;
}

    .ha-cookie-toast__link:hover {
        text-decoration: underline;
    }

/* Buttons – spójne z premium UI */
.ha-btn {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: transform .08s ease, background-color .15s ease, color .15s ease;
}

    .ha-btn:active {
        transform: translateY(1px);
    }

.ha-btn-primary {
    background: #c8a96a;
    color: #101214;
    font-weight: 700;
}

    .ha-btn-primary:hover {
        background: #d6b878;
    }

.ha-btn-ghost {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.78);
}

    .ha-btn-ghost:hover {
        background: rgba(255,255,255,0.10);
        color: rgba(255,255,255,0.92);
    }

/* Desktop: premium toast w lewym dolnym rogu (opcjonalnie) */
@media (min-width: 992px) {
    .ha-cookie-toast {
        left: 24px;
        right: auto;
        margin: 0;
    }
}