/* change the background color */
.navbar-light {
    background-color: #ffffff !important;
    font-family: Arial, cursive, serif !important;
}

/* change the brand and text color */
.navbar-light .navbar-brand,
.navbar-light .navbar-text {
    color: rgba(0, 0, 0, .7);
}

/* change the link color */
.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, .9);
}

/* change the color of active or hovered links */
.navbar-light .nav-item.active .nav-link {
    color: rgba(0, 0, 0, .7);
    background-color: #d8d7dA !important;
    font-weight: bold;
    border-radius: 10px;
}

.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
    color: #000000;
    background-color: #e8e7eA !important;
    border-radius: 10px;
}

.btn-sample {
    color: #000000;
    background-color: #CECDCF;
    border-color: #88878A;
}

.btn-sample:hover,
.btn-sample:focus,
.btn-sample:active,
.btn-sample.active,
.open .dropdown-toggle.btn-sample {
    color: #000000;
    background-color: #625B6B;
    border-color: #88878A;
}

.btn-sample:active,
.btn-sample.active,
.open .dropdown-toggle.btn-sample {
    background-image: none;
}

.btn-sample.disabled,
.btn-sample[disabled],
fieldset[disabled] .btn-sample,
.btn-sample.disabled:hover,
.btn-sample[disabled]:hover,
fieldset[disabled] .btn-sample:hover,
.btn-sample.disabled:focus,
.btn-sample[disabled]:focus,
fieldset[disabled] .btn-sample:focus,
.btn-sample.disabled:active,
.btn-sample[disabled]:active,
fieldset[disabled] .btn-sample:active,
.btn-sample.disabled.active,
.btn-sample[disabled].active,
fieldset[disabled] .btn-sample.active {
    background-color: #CECDCF;
    border-color: #88878A;
}

.btn-sample .badge {
    color: #CECDCF;
    background-color: #000000;
}

body {
    background-color: #ffffff;
    padding-bottom: var(--bottom-nav-height);
    min-height: 100vh;
    display: flex;
}

#sidebar {
    min-width: 270px;
    max-width: 270px;
    background-color: #f8f9fa;
    padding: 0.1rem;
    border-right: 1px solid #dee2e6;
    --bs-offcanvas-width: 270px;
}

#sidebar .offcanvas-body > * {
    width: 100%; /* lub w-100 w HTML */
}

input[type=text] {
    width: 80%;
    min-width: 100px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

.container-fluid {
    font-family: Arial, cursive, serif;
}

/* Position the navbar container inside the image */
.container {
    position: page;
    text-align: left;
    width: 100%;
    font-family: Arial, cursive, serif;
    padding: 2px 2px;
    border: none;
    margin: 0px;
    margin-top: 4px;
    margin-right: 4px;
}

.responsive {
    width: 100%;
    height: auto;
}

p.b {
    font-family: Arial, cursive, serif;
}

.btn:hover {
    background-color: #3e8e41;
    color: white;
}

th, td {
    border-bottom: 1px solid #ddd;
}

tr:hover {
    background-color: #EDEAD9;
}

mark {
    background-color: #FFFF6666;
    border-radius: 2px;
}

.map-container-5 {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.map-container-5 iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.selected-tr {
    background-color: #FFFF6666;
}

a.title:link {
    color: #333332;
    font-weight: bold;
    text-decoration: none;
}

a.title:visited {
    color: #93938f;
    font-weight: bold;
    text-decoration: none;
}

a.love-message:link {
    color: #973434;
    font-weight: bold;
    text-decoration: none;
}

a.love-message:visited {
    color: #3e1616;
    font-weight: bold;
    text-decoration: none;
}


.badge-light {
    color: #212529;
    background-color: #ffffff;
}

.fade-in-image {
    animation: fadeIn 2s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

:root {
    color-scheme: only light;
    --bottom-nav-height: 60px;
}


.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1px 0;
}

.bottom-nav a {
    color: black;
    text-decoration: none;
    text-align: center;
    font-size: 9px;
    flex: 1;
}

.bottom-nav a:hover {
    background-color: #575757;
}


.bottom-nav a .icon {
    display: block;
    /*font-size: 13px;*/
    margin-bottom: 2px;
    height: var(--bottom-nav-height);
}

@media screen
and (orientation: landscape) {
    .bottom-nav {
        display: none;
        height: var(--bottom-nav-height);
        line-height: var(--bottom-nav-height);
    }
}


.dropdown-menu > li > a {
    position: relative;
}

.dropdown-menu > li > a > .badge {
    position: absolute;
    right: 5px
}


.hover-dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.dropdown-menu {
    border-radius: 12px; /* Możesz zmienić na inną wartość */
    overflow: hidden; /* Zapobiega rozlewaniu się cienia */
}

.pagination .dropdown-toggle {
    border-radius: 0;
    border: 1px solid #dee2e6;
    background-color: #ffffff;
    color: #0d6efd;
}

.pagination .dropdown-toggle:hover {
    background-color: #e9ecef;
}

.clickable-row {
    cursor: pointer;
}

.amount {
    font-weight: bold;
    padding-right: 5px;
}

.currency {
    font-size: 0.9em;
    color: gray;
    display: inline;
}

.income {
    color: green;
}

.outcome {
    color: red;
}

.data-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.data-label {
    font-weight: bold;
    color: #495057;
}

.data-value {
    font-size: 1.1rem;
    color: #212529;
}


/* 1. Zmniejszenie marginesów wewnątrz accordion-item */
.accordion-item .accordion-body {
    padding: 0.5rem; /* domyślnie to 1rem — zmniejszamy */
}

.accordion-item .form-check {
    margin-bottom: 0.25rem; /* zmniejszamy margines między checkboxami */
}

/* 2. Szary kolor przycisku nagłówka po rozwinięciu */
.accordion-button:not(.collapsed) {
    background-color: #e9ecef; /* jasnoszary */
    color: #000; /* opcjonalnie czarny tekst */
    font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.spot-text {
    font-size: 0.75em;
    color: gray;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 1.1;
    text-align: center;
}

.oct-input-cell {
    vertical-align: middle !important;
    text-align: right !important;
}

.oct-input-cell-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.oct-input-cell-inner .input-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
}

.oct-input-cell-inner .price-input {
    height: 38px;
    box-sizing: border-box;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: black;
    border-radius: 25%;
    padding: 5px;
    border: 1px solid white;
    filter: invert(1);
    opacity: 0; /* DOMYŚLNIE NIEWIDOCZNE */
    transition: opacity 0.3s ease;
}

.carousel:hover .carousel-control-prev-icon,
.carousel:hover .carousel-control-next-icon {
    opacity: 1; /* POJAWIAJĄ SIĘ PRZY HOVERZE NA CAŁĄ KARUZELĘ */
}

.form-label-sm-custom {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--oct-text) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    margin-bottom: 2px; /* etykieta tuż nad polem */
}


.accordion-button:focus {
    box-shadow: none;
    outline: none;
}


.btn-light:hover {
    background-color: #e0e0e0; /* jasny szary */
    color: #000; /* czarny tekst (opcjonalnie) */
}

.btn-sample:hover {
    background-color: #e0e0e0; /* jasny szary */
    color: #000; /* czarny tekst (opcjonalnie) */
}


.cart-icon {
    position: relative;
    display: inline-block;
}

.cart-icon img {
    display: block;
}

.cart-icon .hover-icon {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

.cart-icon .default-icon {
    transition: opacity 0.2s ease-in-out;
}

.cart-icon:hover .default-icon {
    opacity: 0;
}

.cart-icon:hover .hover-icon {
    opacity: 1;
}


.cart-icon .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.75rem;
    padding: 0.3em 0.5em;
    border-radius: 50%;
    background-color: #6c757d; /* fallback if `text-bg-secondary` not applied */
    color: white;
}

.icon-wrapper {
    position: relative;
}

.icon-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease-in-out;
}

.default-icon {
    opacity: 1;
}

.hover-icon {
    opacity: 0;
}

.top-menu-button:hover .default-icon {
    opacity: 0;
}

.top-menu-button:hover .hover-icon {
    opacity: 1;
}

.top-menu-button {
    text-decoration: none;
}

.top-menu-button:hover {
    text-decoration: none;
}

.top-menu-button label {
    text-decoration: none;
    font-weight: normal;
}

.top-menu-button:hover label {
    text-shadow: 0 0 0.8px black;
    text-decoration: none;
}


.navbar-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.custom-navbar {
    background: linear-gradient(to right, #B06A1D66, #E6AB5566); /* fioletowy gradient */
}

.accordion-button.accordion-button-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem; /* mniejsze litery */
}

.nav-tabs .nav-item .nav-link {
    font-weight: normal;
    transition: text-shadow 0.2s;
}

.nav-tabs .nav-item .nav-link:hover {
    text-shadow: 0 0 0.8px black;
}

.dropdown-item:hover {
    background-color: #e9ecef; /* Jasny szary z Bootstrap */
    color: black; /* Aby tekst nie był niebieski */
}

.dropdown-item.active {
    background-color: #e9ecef !important; /* Ten sam kolor co hover */
    color: black !important;
    font-weight: bold;
}

.accordion-button:hover {
    text-shadow: 0 0 0.8px black;
}

.label-bold-hover:hover {
    text-shadow: 0 0 0.8px black;
}


.carousel-item img {
    transition: transform 0.5s ease;
}

.carousel-item img:hover {
    transform: scale(1.06); /* lekki zoom */
}

.card:hover {
    background-color: #f2f2f2; /* lekko szary */
    cursor: pointer; /* opcjonalnie zmiana kursora */
    transition: background-color 0.3s ease; /* płynne przejście */
}

.highlight-card {
    background: linear-gradient(to top, #fff8c4 0%, transparent 60%);
}


@media (max-width: 991.98px) {
    .navbar-collapse .navbar-nav {
        flex-direction: row; /* KLUCZOWA ZMIANA */
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .navbar-collapse .nav-item {
        flex: 0 1 auto;
        width: 25%; /* 4 ikony w rzędzie – zmień wg potrzeb */
        max-width: 80px;
        margin: 0 !important; /* nadpisuje Twoje inline‑margin */
        text-align: center;
    }

    /* kotwice zachowują własną szerokość 40 px */
    .navbar-collapse .nav-item > a {
        width: 100% !important;
    }
}

/* pływający hamburger wyłącznie na mobile */
@media (max-width: 767.98px) {
    #sidebarToggle {
        position: fixed; /* nie znika przy scrollu           */
        top: 50%; /* wyśrodkowany w pionie            */
        left: 0; /* przy lewej krawędzi ekranu       */
        transform: translateY(-50%); /* dokładne centrowanie     */
        z-index: 1031; /* nad treścią, pod modalami        */
        border-radius: 0 0.5rem 0.5rem 0; /* lekko zaokr. prawy bok */
        padding: .75rem .6rem;
    }
}


@media (min-width: 991px) {
    #sidebar {
        visibility: visible !important;
        transform: none !important;
        display: block !important;
        position: static !important;
        z-index: auto !important;
    }
}


/* Ukryj wskaźniki domyślnie */
.carousel-indicators {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* nie klikaj wskaźników, gdy są ukryte */
}

/* Pokaż tylko, gdy kursor jest nad karuzelą */
.carousel:hover .carousel-indicators {
    opacity: 1;
    pointer-events: auto;
}

.carousel-indicators [data-bs-target] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: white;
    opacity: 0.5;
    margin: 0 6px;
    transition: opacity 0.3s ease-in-out;
    border: 1px solid black; /* Opcjonalnie: kółka zawsze widoczne jako obrys */
}

.carousel-indicators [data-bs-target]:hover,
.carousel-indicators [data-bs-target].active:hover {
    opacity: 1;
    transform: scale(1.2);
}

.carousel-indicators .active {
    opacity: 0.9;
    transform: scale(1);
}


#video, #canvas, #preview {
    width: 100%;
    max-width: 80%;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: none;
}

#video.active, #canvas.active, #preview.active {
    display: block;
}

.profit-box {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 2px;
}

.profit-positive {
    color: #198754;
    background-color: rgba(25, 135, 84, 0.1);
}

.profit-negative {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

#citySuggestions {
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    cursor: pointer;
}

/* Nadpisanie tła tooltipów Bootstrap 5 */
.tooltip .tooltip-inner {
    background-color: rgba(255, 255, 255, 0.6);
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

a.title,
a.title:visited,
a.title:hover,
a.title:active {
    color: #000 !important;
    text-decoration: none; /* opcjonalnie, jeśli chcesz usunąć podkreślenie */
}

.nav-tabs .nav-link {
    padding: 0.25rem 0.5rem; /* mniejsze niż domyślne 0.5rem 1rem */
}

#map {
    cursor: pointer;
}

/* ============================================================
   oct-img-url — galeria URL obrazków do dodawania w formularzu
   ============================================================ */
.oct-img-url-section {
    margin-top: 16px;
}

.oct-img-url-add-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.oct-img-url-add-row .oct-form-input {
    flex: 1;
}

.oct-img-url-add-row .oct-img-url-add-btn {
    flex-shrink: 0;
    padding: 0 20px;
    border: none;
    border-radius: 24px;
    background: var(--oct-text, #333);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.oct-img-url-add-btn:hover {
    background: #222;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.oct-img-url-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.oct-img-url-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    min-height: 0;
}

.oct-img-url-list:empty {
    display: none;
}

.oct-img-url-card {
    width: 110px;
    border: 1px solid var(--oct-border, #e5e5e5);
    border-radius: 10px;
    overflow: hidden;
    background: var(--oct-bg-alt, #fafafa);
    display: flex;
    flex-direction: column;
}

.oct-img-url-thumb {
    width: 110px;
    height: 110px;
    object-fit: cover;
    display: block;
    background: #fff;
}

.oct-img-url-controls {
    display: flex;
    justify-content: space-between;
    padding: 4px;
    gap: 2px;
    border-top: 1px solid var(--oct-border-light, #f0f0f0);
}

.oct-img-url-btn {
    flex: 1;
    height: 26px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    color: var(--oct-text, #333);
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oct-img-url-btn:hover:not(:disabled) {
    background: var(--oct-bg-hover, #f5f7f9);
}

.oct-img-url-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.oct-img-url-btn-del:hover {
    background: rgba(217, 83, 79, 0.1);
    color: var(--oct-outcome, #d9534f);
}

.oct-img-url-error {
    display: none;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff0f0;
    border: 1px solid #f5a0a0;
    color: #7a0000;
    font-size: 12px;
}

.oct-img-url-error.oct-img-url-error-show {
    display: block;
}

/* usuwa strzałkę z prawej strony selecta */
.selectpicker.btn .dropdown-toggle::after {
    display: none;
}

.hover-effect:hover {
    background-color: #e9ecef;
}

#video {
    width: 700px;
    height: 700px;
    display: block;
    margin: 0 auto;
    max-width: 100%;
}


/* wrapper for this specific row */
.equalize-row > .col-6 {
    /* sprawia, że kolumny rozciągają dziecko na całą wysokość */
    display: flex;
    align-items: stretch;
    padding-left: 0; /* jeśli chcesz dopasować spacing */
    padding-right: 0;
}

/* przycisk w kolumnie: niech rozciąga się na całą wysokość rodzica */
.equalize-row .btn {
    flex: 1 1 auto; /* zajmuje całą dostępną wysokość */
    display: flex; /* pozwala łatwo wycentrować zawartość */
    align-items: center; /* pionowe wyśrodkowanie tekstu */
    justify-content: center; /* poziome wyśrodkowanie tekstu */
    text-align: center;
    white-space: normal; /* pozwala na zawijanie długości tekstu */
    padding-left: 3.25rem; /* zostawia miejsce na ikonę po lewej */
    padding-right: 1rem;
    position: relative; /* konieczne dla absolute obrazka */
    /*min-height: 44px;          !* opcjonalne: minimalna wysokość przycisku *!*/
    box-sizing: border-box;
}

/* poprawne pozycjonowanie ikony wewnątrz przycisku */
.equalize-row .btn img.position-absolute {
    position: absolute !important;
    pointer-events: none;
}

.form-control:focus {
    background-color: #FFEB9966 !important; /* jasnożółty, jak alert-warning */
    box-shadow: none !important; /* usuwa niebieską poświatę Bootstrapa */
    outline: none !important; /* usuwa ramkę z przeglądarki */
}

.img-zoom {
    transition: transform 0.3s ease; /* płynna animacja */
}

.img-zoom:hover {
    transform: scale(1.05); /* powiększenie do 105% */
}

.price-input {
    width: 140px;
    text-align: right;
    border: 2px solid #e9ecef;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.price-input:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    background-color: #fff;
}

.price-input:hover {
    border-color: #0d6efd;
    background-color: #fff;
}

.input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 576px) {
    .form-row-container {
        padding: 1rem 0.5rem;
    }

    .price-input {
        width: 120px;
    }

    .auction-fieldset {
        padding: 1rem;
    }
}

/* Przyciski z ikonami - responsywne */
.btn-with-icon {
    position: relative;
    padding-left: 2.5rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: visible;
    line-height: 1.3;
}

.btn-with-icon img {
    position: absolute;
    left: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* Na średnich ekranach */
@media (max-width: 991px) {
    .btn-with-icon {
        font-size: 0.9rem;
        padding-left: 2.25rem !important;
    }

    .btn-with-icon img {
        left: 0.3rem;
    }
}

/* Rozszerzenie dla małych ekranów */
@media (max-width: 576px) {
    .btn-with-icon {
        padding-left: 2.25rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        font-size: 0.875rem;
        min-height: 44px;
        white-space: normal;
        line-height: 1.2;
    }

    .btn-with-icon img {
        width: 18px;
        height: 18px;
        left: 0.3rem;
    }
}

/* Na bardzo małych ekranach */
@media (max-width: 400px) {
    .btn-with-icon {
        padding-left: 1.85rem !important;
        padding-right: 0.4rem !important;
        font-size: 0.8rem;
        min-height: 48px;
        line-height: 1.1;
    }

    .btn-with-icon img {
        width: 16px;
        height: 16px;
        left: 0.25rem;
    }
}


.metals {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 1rem;
    text-align: right;
}

.metal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.line {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
}

label {
    margin-right: 0.2rem;
}

.usd {
    font-size: 0.85em;
    color: #666;
    margin-left: 0.25rem;
}

/* 📱 MOBILE */
@media (max-width: 600px) {
    .metals {
        flex-direction: column;
        gap: 0.5rem;
    }
}


/* Kontener z efektem badge */
.parameters-container {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #dee2e6;
}

/* Nagłówek */
.parameters-container legend {
    font-size: 14px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid #495057;
    display: inline-block;
}

/* Wiersze jako flexbox */
.parameters-container > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 8px;
}

/* Label */
.parameters-container label {
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
}

.olector-picker *, .olector-picker *::before, .olector-picker *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

.olector-picker {
    --op-bg: #f5f5f5;
    --op-bg-white: #ffffff;
    --op-bg-input: #ffffff;
    --op-border: #dcdcdc;
    --op-border-hover: #bbb;
    --op-text: #333333;
    --op-text-muted: #888888;
    --op-text-light: #aaaaaa;
    --op-accent: #d9534f;
    --op-accent-soft: rgba(217, 83, 79, 0.08);
    --op-accent-border: rgba(217, 83, 79, 0.4);
    --op-teal: #B06A1D66;
    --op-radius: 8px;
    --op-radius-sm: 6px;
    --op-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --op-transition: 0.18s ease;

    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--op-text) !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
}

.olector-picker .op-container {
    width: 100%;
    max-width: 800px;
    background: var(--op-bg-white) !important;
    border: 1px solid var(--op-border) !important;
    border-radius: var(--op-radius) !important;
    padding: 28px !important;
    box-shadow: var(--op-shadow) !important;
    position: relative;
    overflow: hidden;
}

.olector-picker .op-container::before {
    display: none;
}

.op-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.olector-picker .op-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--op-border) !important;
}

.olector-picker .op-header-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--op-radius-sm) !important;
    border: 1px solid var(--op-border) !important;
    background: var(--op-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.olector-picker .op-header-icon svg {
    width: 18px !important;
    height: 18px !important;
    color: #555 !important;
}

.olector-picker .op-header h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--op-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1.3 !important;
}

.olector-picker .op-header p {
    font-size: 12px !important;
    color: var(--op-text-muted) !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

/* Presets */
.olector-picker .op-presets {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
}

.olector-picker .op-preset-btn {
    padding: 5px 12px !important;
    border-radius: 20px !important;
    border: 1px solid var(--op-border) !important;
    background: var(--op-bg-white) !important;
    color: var(--op-text-muted) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--op-transition) !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.olector-picker .op-preset-btn:hover {
    border-color: var(--op-border-hover) !important;
    color: var(--op-text) !important;
    background: var(--op-bg) !important;
}

.olector-picker .op-preset-btn.active {
    border-color: var(--op-accent-border) !important;
    background: var(--op-accent-soft) !important;
    color: var(--op-accent) !important;
}

/* Groups */
.olector-picker .op-group {
    margin-bottom: 14px !important;
}

.olector-picker .op-group-label {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--op-text-muted) !important;
    margin-bottom: 8px !important;
}

.olector-picker .op-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--op-teal) !important;
    display: inline-block !important;
}

.olector-picker .op-dot-end {
    background: var(--op-accent) !important;
}

.olector-picker .op-row {
    display: flex !important;
    gap: 10px !important;
}

.olector-picker .op-field {
    flex: 1 !important;
    position: relative !important;
}

.olector-picker .op-field-time {
    flex: 0 0 130px !important;
}

.olector-picker .op-field label {
    position: absolute !important;
    top: -6px !important;
    left: 10px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: var(--op-text-light) !important;
    background: var(--op-bg-white) !important;
    padding: 0 5px !important;
    z-index: 1 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.olector-picker .op-field input[type="date"],
.olector-picker .op-field input[type="time"] {
    width: 100% !important;
    padding: 11px 14px !important;
    border: 1px solid var(--op-border) !important;
    border-radius: var(--op-radius-sm) !important;
    background: var(--op-bg-input) !important;
    color: var(--op-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: var(--op-transition) !important;
    outline: none !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
}

.olector-picker .op-field input:hover {
    border-color: var(--op-border-hover) !important;
}

.olector-picker .op-field input:focus {
    border-color: #999 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06) !important;
}

.olector-picker .op-field input::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}

/* Divider */
.olector-picker .op-divider {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 14px 0 !important;
}

.olector-picker .op-divider-line {
    flex: 1 !important;
    height: 1px !important;
    background: var(--op-border) !important;
}

.olector-picker .op-divider-icon {
    color: var(--op-text-light) !important;
    display: flex !important;
    align-items: center !important;
}

.olector-picker .op-divider-icon svg {
    width: 14px !important;
    height: 14px !important;
}

/* Duration */
.olector-picker .op-duration {
    background: var(--op-bg) !important;
    border: 1px solid var(--op-border) !important;
    border-radius: var(--op-radius-sm) !important;
    padding: 12px 16px !important;
    margin-top: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: var(--op-transition) !important;
}

.olector-picker .op-duration.valid {
    border-color: #ccc !important;
    background: #fafafa !important;
}

.olector-picker .op-duration.error {
    border-color: var(--op-accent-border) !important;
    background: var(--op-accent-soft) !important;
}

.olector-picker .op-duration-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--op-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.olector-picker .op-duration-value {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--op-text) !important;
}

.olector-picker .op-duration.error .op-duration-value {
    color: var(--op-accent) !important;
}

/* Actions */
.olector-picker .op-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

.olector-picker .op-btn {
    flex: 1 !important;
    padding: 11px 18px !important;
    border-radius: var(--op-radius-sm) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--op-transition) !important;
    border: none !important;
    line-height: 1.4 !important;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.olector-picker .op-btn-secondary {
    background: var(--op-bg-white) !important;
    color: var(--op-text-muted) !important;
    border: 1px solid var(--op-border) !important;
}

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

.olector-picker .op-btn-primary {
    background: var(--op-text) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.olector-picker .op-btn-primary:hover {
    background: #222 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.olector-picker .op-status {
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 12px !important;
    padding: 8px !important;
    border-radius: 6px !important;
    transition: opacity 0.3s !important;
}

@media (max-width: 480px) {
    .olector-picker .op-container {
        padding: 18px !important;
    }

    .olector-picker .op-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .olector-picker .op-field-time {
        flex: 1 !important;
    }

    .olector-picker .op-presets {
        gap: 4px !important;
    }

    .olector-picker .op-preset-btn {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
}


.olector-cart-table {
    --oct-bg: #ffffff;
    --oct-bg-alt: #fafafa;
    --oct-bg-hover: #f5f7f9;
    --oct-border: #e5e5e5;
    --oct-border-light: #f0f0f0;
    --oct-text: #333333;
    --oct-text-muted: #888888;
    --oct-text-light: #aaaaaa;
    --oct-accent: #d9534f;
    --oct-teal: #E6AB5566;
    --oct-income: #2e8b57;
    --oct-outcome: #d9534f;
    --oct-radius: 10px;
    --oct-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --oct-transition: 0.18s ease;

    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    margin-bottom: 10px !important;
}

/* Container */
.olector-cart-table .oct-wrapper {
    background: var(--oct-bg) !important;
    border: 1px solid var(--oct-border) !important;
    border-radius: var(--oct-radius) !important;
    box-shadow: var(--oct-shadow) !important;
    overflow: hidden !important;
    position: relative !important;
}

.olector-cart-table .oct-wrapper::before {
    display: none !important;
}

/* Desktop table */
.olector-cart-table table.oct-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    font-size: 13px !important;
    background: var(--oct-bg) !important;
}

.olector-cart-table .oct-table thead th {
    background: var(--oct-bg-alt) !important;
    color: var(--oct-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--oct-border) !important;
    border-top: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.olector-cart-table .oct-table thead th:first-child {
    padding-left: 18px !important;
}

.olector-cart-table .oct-table thead th:last-child {
    padding-right: 18px !important;
}

.olector-cart-table .oct-table tbody td {
    padding: 14px 14px !important;
    border-bottom: 1px solid var(--oct-border-light) !important;
    vertical-align: middle !important;
    color: var(--oct-text) !important;
    background: transparent !important;
    transition: background var(--oct-transition) !important;
}

.olector-cart-table .oct-table tbody tr:hover td {
    background: var(--oct-bg-hover) !important;
}

.olector-cart-table .oct-table tbody tr:last-child td {
    border-bottom: none !important;
}

.olector-cart-table .oct-table tbody td:first-child {
    padding-left: 18px !important;
}

.olector-cart-table .oct-table tbody td:last-child {
    padding-right: 18px !important;
}

/* Image cell */
.olector-cart-table .oct-img-cell {
    width: 80px !important;
    min-width: 80px !important;
    padding: 10px 8px 10px 18px !important;
}

.olector-cart-table .oct-img-cell img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    border: 1px solid var(--oct-border-light) !important;
}

/* Name cell */
.olector-cart-table .oct-name-cell {
    min-width: 180px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: var(--oct-text) !important;
    line-height: 1.45 !important;
}

.olector-cart-table .oct-name-cell a {
    color: var(--oct-text) !important;
    text-decoration: none !important;
    transition: color var(--oct-transition) !important;
}

.olector-cart-table .oct-name-cell a:hover {
    color: var(--oct-teal) !important;
}

.olector-cart-table .oct-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 6px !important;
}

.olector-cart-table .oct-badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--oct-text-muted) !important;
    background: var(--oct-bg-alt) !important;
    border: 1px solid var(--oct-border) !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
    transition: var(--oct-transition) !important;
}

.olector-cart-table .oct-badge:hover {
    border-color: var(--oct-teal) !important;
    color: var(--oct-text) !important;
}

/* Numeric cells */
.olector-cart-table .oct-num {
    text-align: right !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 13px !important;
}

.olector-cart-table .oct-num-bold {
    font-weight: 700 !important;
}

.olector-cart-table .oct-income {
    color: var(--oct-income) !important;
}

.olector-cart-table .oct-outcome {
    color: var(--oct-outcome) !important;
}

.olector-cart-table .oct-currency {
    font-size: 11px !important;
    color: var(--oct-text-muted) !important;
    margin-left: 3px !important;
}

.olector-cart-table .oct-profit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    margin-top: 4px !important;
}

.olector-cart-table .oct-profit-pos {
    color: var(--oct-income) !important;
    background: rgba(46, 139, 87, 0.08) !important;
}

.olector-cart-table .oct-profit-neg {
    color: var(--oct-outcome) !important;
    background: rgba(217, 83, 79, 0.08) !important;
}

/* Inline form inputs */
.olector-cart-table .oct-inline-input {
    width: 80px !important;
    padding: 7px 10px !important;
    border: 1px solid var(--oct-border) !important;
    border-radius: 6px !important;
    background: var(--oct-bg) !important;
    color: var(--oct-text) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: right !important;
    outline: none !important;
    transition: var(--oct-transition) !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    box-shadow: none !important;
    height: auto !important;
}

.olector-cart-table .oct-inline-input::-webkit-inner-spin-button,
.olector-cart-table .oct-inline-input::-webkit-outer-spin-button {
    opacity: 0.3 !important;
}

.olector-cart-table .oct-inline-input:hover {
    border-color: #bbb !important;
}

.olector-cart-table .oct-inline-input:focus {
    border-color: #999 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) !important;
}

.olector-cart-table .oct-input-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Remove button */
.olector-cart-table .oct-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: var(--oct-transition) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.olector-cart-table .oct-remove:hover {
    background: rgba(217, 83, 79, 0.08) !important;
    border-color: rgba(217, 83, 79, 0.2) !important;
}

.olector-cart-table .oct-remove img {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.5 !important;
    transition: opacity var(--oct-transition) !important;
}

.olector-cart-table .oct-remove:hover img {
    opacity: 1 !important;
}

/* ============================================================
   MOBILE: Karty zamiast tabeli
   ============================================================ */
.olector-cart-table .oct-card-header {
    background: var(--oct-bg-alt) !important;
    color: var(--oct-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid var(--oct-border) !important;
    border-radius: var(--oct-radius) var(--oct-radius) 0 0 !important;
    white-space: nowrap !important;
}

.olector-cart-table .oct-cards {
    display: none !important;
}

@media (max-width: 991px) {
    .olector-cart-table .oct-desktop {
        display: none !important;
    }

    .olector-cart-table .oct-cards {
        display: block !important;
    }

    .olector-cart-table .oct-card {
        padding: 16px 18px !important;
        border-bottom: 1px solid var(--oct-border-light) !important;
    }

    .olector-cart-table .oct-card:last-child {
        border-bottom: none !important;
    }

    .olector-cart-table .oct-card-top {
        display: flex !important;
        gap: 14px !important;
        align-items: flex-start !important;
    }

    .olector-cart-table .oct-card-img {
        width: 64px !important;
        height: 64px !important;
        border-radius: 12px !important;
        object-fit: cover !important;
        border: 1px solid var(--oct-border-light) !important;
        flex-shrink: 0 !important;
    }

    .olector-cart-table .oct-card-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--oct-text) !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
    }

    .olector-cart-table .oct-card-name:hover {
        color: var(--oct-teal) !important;
    }

    .olector-cart-table .oct-card-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px 20px !important;
        margin-top: 14px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--oct-border-light) !important;
    }

    .olector-cart-table .oct-card-field-label {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: var(--oct-text-light) !important;
        margin-bottom: 2px !important;
    }

    .olector-cart-table .oct-card-field-value {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--oct-text) !important;
        font-variant-numeric: tabular-nums !important;
    }

    .olector-cart-table .oct-card-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--oct-border-light) !important;
    }

    .olector-cart-table .oct-card-result {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }
}


/* Auction-specific styles — pod .olector-picker */
.olector-picker .op-auction-rows {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.olector-picker .op-auction-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.olector-picker .op-auction-label {
    flex: 0 0 160px !important;
    text-align: right !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--op-text) !important;
}

.olector-picker .op-auction-input-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.olector-picker .op-auction-input-wrap input[type="number"] {
    width: 120px !important;
    padding: 11px 14px !important;
    border: 1px solid var(--op-border) !important;
    border-radius: var(--op-radius-sm) !important;
    background: var(--op-bg-input) !important;
    color: var(--op-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: var(--op-transition) !important;
    outline: none !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

.olector-picker .op-auction-input-wrap input[type="number"]::-webkit-inner-spin-button,
.olector-picker .op-auction-input-wrap input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.4;
}

.olector-picker .op-auction-input-wrap input[type="number"]:hover {
    border-color: var(--op-border-hover) !important;
}

.olector-picker .op-auction-input-wrap input[type="number"]:focus {
    border-color: #999 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06) !important;
}

.olector-picker .op-currency {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--op-text-muted) !important;
}

@media (max-width: 480px) {
    .olector-picker .op-auction-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .olector-picker .op-auction-label {
        text-align: left !important;
        flex: none !important;
    }
}


/* Treasury summary card */
.olector-cart-table .oct-summary {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    padding: 20px 22px !important;
}

.olector-cart-table .oct-summary-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    border: 1px solid var(--oct-border) !important;
    background: var(--oct-bg-alt) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.olector-cart-table .oct-summary-icon img {
    width: 28px !important;
    height: 28px !important;
    opacity: 0.7 !important;
}

.olector-cart-table .oct-summary-main {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
}

.olector-cart-table .oct-summary-main-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--oct-text-light) !important;
    margin-bottom: 2px !important;
}

.olector-cart-table .oct-summary-main-value {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--oct-text) !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
}

.olector-cart-table .oct-summary-main-value .oct-currency {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Separator pionowy */
.olector-cart-table .oct-summary-divider {
    width: 1px !important;
    height: 44px !important;
    background: var(--oct-border) !important;
    flex-shrink: 0 !important;
}

/* Pola statystyk */
.olector-cart-table .oct-summary-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
    flex: 1 !important;
    align-items: flex-start !important;
}

.olector-cart-table .oct-summary-stat {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

.olector-cart-table .oct-summary-stat-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--oct-text-light) !important;
}

.olector-cart-table .oct-summary-stat-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--oct-text) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

/* Chart link — reużywa oct-remove */
.olector-cart-table .oct-summary-action {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.olector-cart-table .oct-summary-action a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    border: 1px solid var(--oct-border) !important;
    background: var(--oct-bg-alt) !important;
    transition: var(--oct-transition) !important;
    text-decoration: none !important;
}

.olector-cart-table .oct-summary-action a:hover {
    background: var(--oct-bg-hover) !important;
    border-color: var(--oct-teal) !important;
}

.olector-cart-table .oct-summary-action img {
    width: 22px !important;
    height: 22px !important;
    opacity: 0.6 !important;
    transition: opacity var(--oct-transition) !important;
}

.olector-cart-table .oct-summary-action a:hover img {
    opacity: 1 !important;
}

/* Mobile */
@media (max-width: 600px) {
    .olector-cart-table .oct-summary {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding: 18px !important;
    }

    .olector-cart-table .oct-summary-top-row {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .olector-cart-table .oct-summary-divider {
        display: none !important;
    }

    .olector-cart-table .oct-summary-stats {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px 20px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--oct-border-light) !important;
    }

    .olector-cart-table .oct-summary-action {
        position: absolute !important;
        right: 18px !important;
        top: 22px !important;
        margin-left: 0 !important;
    }

    .olector-cart-table .oct-summary {
        position: relative !important;
    }
}


/* Profile form */
.olector-cart-table .oct-form-section {
    padding: 24px 22px !important;
}

.olector-cart-table .oct-form-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.olector-cart-table .oct-form-row {
    display: flex !important;
    gap: 14px !important;
}

.olector-cart-table .oct-form-field {
    flex: 1 !important;
    position: relative !important;
}

.olector-cart-table .oct-form-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--oct-text-muted) !important;
    margin-bottom: 6px !important;
    padding-left: 2px !important;
}

.olector-cart-table .oct-form-visibility {
    display: inline-flex !important;
    align-items: center !important;
    padding: 1px 8px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
}

.olector-cart-table .oct-vis-hidden {
    background: var(--oct-bg-alt) !important;
    color: var(--oct-text-light) !important;
    border: 1px solid var(--oct-border) !important;
}

.olector-cart-table .oct-vis-public {
    background: rgba(91, 197, 167, 0.1) !important;
    color: var(--oct-teal) !important;
    border: 1px solid rgba(91, 197, 167, 0.3) !important;
}

.olector-cart-table .oct-vis-partial {
    background: rgba(217, 183, 79, 0.1) !important;
    color: #b8960c !important;
    border: 1px solid rgba(217, 183, 79, 0.3) !important;
}

.olector-cart-table .oct-form-input {
    width: 100% !important;
    padding: 11px 16px !important;
    border: 1px solid var(--oct-border) !important;
    border-radius: 24px !important;
    background: var(--oct-bg) !important;
    color: var(--oct-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    outline: none !important;
    transition: var(--oct-transition) !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.olector-cart-table .oct-form-input:hover {
    border-color: #bbb !important;
}

.olector-cart-table .oct-form-input:focus {
    border-color: var(--oct-teal) !important;
    box-shadow: 0 0 0 3px rgba(91, 197, 167, 0.12) !important;
    background: var(--oct-bg) !important;
}

.olector-cart-table .oct-form-input:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    background: var(--oct-bg-alt) !important;
}

/* Select */
.olector-cart-table .oct-form-select {
    width: 100% !important;
    padding: 11px 36px 11px 16px !important;
    border: 1px solid var(--oct-border) !important;
    border-radius: 24px !important;
    background: var(--oct-bg) !important;
    color: var(--oct-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    outline: none !important;
    transition: var(--oct-transition) !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 6px !important;
}

.olector-cart-table .oct-form-select:hover {
    border-color: #bbb !important;
}

.olector-cart-table .oct-form-select:focus {
    border-color: var(--oct-teal) !important;
    box-shadow: 0 0 0 3px rgba(91, 197, 167, 0.12) !important;
}

/* Date input */
.olector-cart-table .oct-form-input[type="date"] {
    padding-right: 12px !important;
}

.olector-cart-table .oct-form-input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.4 !important;
    cursor: pointer !important;
}

/* Divider */
.olector-cart-table .oct-form-divider {
    height: 1px !important;
    background: var(--oct-border-light) !important;
    margin: 6px 0 !important;
}

/* Submit button */
.olector-cart-table .oct-form-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 32px !important;
    border: none !important;
    border-radius: 24px !important;
    background: var(--oct-text) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--oct-transition) !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    margin-top: 8px !important;
}

.olector-cart-table .oct-form-submit:hover {
    background: #222 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Mobile */
@media (max-width: 600px) {
    .olector-cart-table .oct-form-section {
        padding: 18px 16px !important;
    }

    .olector-cart-table .oct-form-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .olector-cart-table .oct-form-submit {
        width: 100% !important;
    }
}


.olector-cart-table .oct-summary-icon .cart-icon {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

.olector-cart-table .oct-summary-icon .cart-icon img {
    grid-area: 1 / 1 !important;
    width: 28px !important;
    height: 28px !important;
    transition: opacity 0.2s ease-in-out !important;
}

.olector-cart-table .oct-summary-icon .cart-icon .default-icon {
    opacity: 0.7 !important;
}

.olector-cart-table .oct-summary-icon .cart-icon .hover-icon {
    opacity: 0 !important;
    position: static !important; /* nadpisuje absolute z .cart-icon */
}

.olector-cart-table .oct-summary-icon:hover .cart-icon .default-icon {
    opacity: 0 !important;
}

.olector-cart-table .oct-summary-icon:hover .cart-icon .hover-icon {
    opacity: 1 !important;
}

.olector-cart-table .oct-summary-icon:hover {
    background: #ededee !important;
    border-color: #ccc !important;
    transition: var(--oct-transition) !important;
}


/* Toggle switch */
.olector-cart-table .oct-switch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.olector-cart-table .oct-switch input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

.olector-cart-table .oct-switch-track {
    position: relative !important;
    width: 42px !important;
    height: 24px !important;
    background: #d5d5d5 !important;
    border-radius: 12px !important;
    border: 1px solid var(--oct-border) !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.olector-cart-table .oct-switch-track::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 18px !important;
    height: 18px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.25s ease !important;
}

/* Checked state */
.olector-cart-table .oct-switch input:checked + .oct-switch-track {
    background: var(--oct-teal) !important;
    border-color: var(--oct-teal) !important;
}

.olector-cart-table .oct-switch input:checked + .oct-switch-track::after {
    left: 20px !important;
}

/* Hover */
.olector-cart-table .oct-switch:hover .oct-switch-track {
    border-color: #bbb !important;
}

.olector-cart-table .oct-switch:hover input:checked + .oct-switch-track {
    background: #4db899 !important;
    border-color: #4db899 !important;
}

/* Focus */
.olector-cart-table .oct-switch input:focus-visible + .oct-switch-track {
    box-shadow: 0 0 0 3px rgba(91, 197, 167, 0.2) !important;
}

/* Disabled */
.olector-cart-table .oct-switch input:disabled + .oct-switch-track {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.olector-cart-table .oct-switch input:disabled ~ .oct-switch-label {
    opacity: 0.4 !important;
}

.olector-cart-table .oct-switch:has(input:disabled) {
    cursor: not-allowed !important;
}

/* Label */
.olector-cart-table .oct-switch-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--oct-text) !important;
    transition: color var(--oct-transition) !important;
    line-height: 1.3 !important;
}

.olector-cart-table .oct-switch-sublabel {
    display: block !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--oct-text-muted) !important;
    margin-top: 1px !important;
}


/* Confirmation modal — scopowany */
.olector-cart-table .oct-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.olector-cart-table .oct-modal-overlay.oct-modal-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.olector-cart-table .oct-modal-box {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
    padding: 24px 28px !important;
    max-width: 360px !important;
    width: 90% !important;
    text-align: center !important;
    transform: scale(0.95) !important;
    transition: transform 0.2s ease !important;
}

.olector-cart-table .oct-modal-overlay.oct-modal-visible .oct-modal-box {
    transform: scale(1) !important;
}

.olector-cart-table .oct-modal-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--oct-text) !important;
    margin-bottom: 6px !important;
}

.olector-cart-table .oct-modal-desc {
    font-size: 13px !important;
    color: var(--oct-text-muted) !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

.olector-cart-table .oct-modal-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
}

.olector-cart-table .oct-modal-btn {
    padding: 9px 24px !important;
    border-radius: 20px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--oct-transition) !important;
    outline: none !important;
    border: none !important;
    line-height: 1.4 !important;
}

.olector-cart-table .oct-modal-btn-cancel {
    background: var(--oct-bg-alt) !important;
    color: var(--oct-text-muted) !important;
    border: 1px solid var(--oct-border) !important;
}

.olector-cart-table .oct-modal-btn-cancel:hover {
    background: #e8e8e8 !important;
    color: var(--oct-text) !important;
}

.olector-cart-table .oct-modal-btn-confirm {
    background: var(--oct-teal) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.olector-cart-table .oct-modal-btn-confirm:hover {
    background: #4db899 !important;
}


/* Sale panel */
.olector-cart-table .oct-sale-panel {
    padding: 28px 24px !important;
    text-align: center !important;
}

.olector-cart-table .oct-sale-price {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--oct-text) !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
}

.olector-cart-table .oct-sale-price .oct-currency {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.olector-cart-table .oct-sale-type {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 14px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-top: 8px !important;
    background: rgba(91, 197, 167, 0.1) !important;
    color: var(--oct-teal) !important;
    border: 1px solid rgba(91, 197, 167, 0.25) !important;
}

/* Like / thumbs up */
/* User avatar dropdown */
.oct-nav-dropdown .dropdown-menu {
    min-width: 180px !important;
    padding: 4px 0 !important;
}

.oct-nav-dropdown .oct-nav-user-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.oct-nav-dropdown .oct-nav-user-header img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--oct-border, #e5e5e5);
    object-fit: cover;
    flex-shrink: 0;
}

.oct-nav-dropdown .oct-nav-user-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--oct-text, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oct-nav-dropdown .oct-nav-user-sub {
    font-size: 11px;
    color: var(--oct-text-muted, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oct-nav-dropdown .dropdown-item {
    font-size: 12px !important;
    padding: 5px 12px !important;
    color: var(--oct-text, #333) !important;
}

.oct-nav-dropdown .dropdown-item-danger {
    color: var(--oct-outcome, #d9534f) !important;
}

.oct-nav-dropdown hr {
    margin: 3px 0 !important;
    border-color: var(--oct-border, #e5e5e5) !important;
}

.oct-like-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--oct-border, #e5e5e5);
    border-radius: 20px;
    background: var(--oct-bg, #ffffff);
    color: var(--oct-text, #333);
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
    user-select: none;
}

.oct-like-pill:hover {
    background: var(--oct-bg-hover, #f5f7f9);
    border-color: #bbb;
    color: var(--oct-text, #333);
    text-decoration: none;
}

.oct-like-pill .oct-like-pill-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--oct-text-muted, #888);
    min-width: 12px;
    text-align: right;
}

.oct-like-pill .oct-like-pill-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--oct-text, #333);
}

.oct-like-pill .oct-like-pill-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.oct-like-pill .oct-like-pill-icon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    transition: opacity 0.2s ease-in-out;
}

.oct-like-pill .oct-like-pill-icon .default-icon {
    opacity: 1;
}

.oct-like-pill .oct-like-pill-icon .hover-icon {
    opacity: 0;
}

.oct-like-pill:hover .oct-like-pill-icon .default-icon {
    opacity: 0;
}

.oct-like-pill:hover .oct-like-pill-icon .hover-icon {
    opacity: 1;
}

.olector-cart-table .oct-like-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
}

.olector-cart-table .oct-like-count {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--oct-text-muted) !important;
    min-width: 20px !important;
    text-align: right !important;
}

.olector-cart-table .oct-like-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid var(--oct-border) !important;
    background: var(--oct-bg-alt) !important;
    transition: var(--oct-transition) !important;
    text-decoration: none !important;
}

.olector-cart-table .oct-like-btn:hover {
    background: #ededee !important;
    border-color: #ccc !important;
}

.olector-cart-table .oct-like-btn img {
    width: 18px !important;
    height: 18px !important;
}

.olector-cart-table .oct-like-btn.cart-icon .hover-icon {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Wrapper dla info/notice — układa dzieci w kolumnie */
.olector-cart-table .oct-sale-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-top: 8px !important;
}

/* Buy-now info & minimum amount notice */
.olector-cart-table .oct-sale-info {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--oct-income) !important;
    background: rgba(46, 139, 87, 0.07) !important;
    border: 1px solid rgba(46, 139, 87, 0.2) !important;
    border-radius: 10px !important;
    padding: 4px 10px !important;
    margin-top: 8px !important;
    white-space: nowrap !important;
}

.olector-cart-table .oct-sale-info .oct-currency {
    font-size: 11px !important;
    font-weight: 700 !important;
    opacity: 0.75 !important;
}

.olector-cart-table .oct-sale-info .oct-sale-price {
    font-weight: 700 !important;
    color: var(--oct-text) !important;
    font-variant-numeric: tabular-nums !important;
}

.olector-cart-table .oct-sale-notice {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--oct-text-muted) !important;
    background: var(--oct-bg-alt) !important;
    border: 1px solid var(--oct-border-light) !important;
    border-radius: 10px !important;
    padding: 4px 10px !important;
    margin-top: 6px !important;
}

.olector-cart-table .oct-sale-notice .oct-currency {
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* Divider */
.olector-cart-table .oct-sale-divider {
    height: 1px !important;
    background: var(--oct-border-light) !important;
    margin: 20px 0 !important;
}

/* Action buttons grid */
.olector-cart-table .oct-sale-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.olector-cart-table .oct-sale-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border: 1px solid var(--oct-border) !important;
    border-radius: 20px !important;
    background: var(--oct-bg) !important;
    color: var(--oct-text) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--oct-transition) !important;
    text-decoration: none !important;
    outline: none !important;
    white-space: nowrap !important;
}

.olector-cart-table .oct-sale-btn:hover {
    background: var(--oct-bg-hover) !important;
    border-color: #bbb !important;
    color: var(--oct-text) !important;
}

.olector-cart-table .oct-sale-btn:disabled,
.olector-cart-table .oct-sale-btn[disabled] {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.olector-cart-table .oct-sale-btn-sm {
    padding: 5px 12px !important;
    font-size: 11px !important;
    border-radius: 14px !important;
}

.olector-cart-table .oct-sale-btn-sm:disabled,
.olector-cart-table .oct-sale-btn-sm[disabled] {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.olector-cart-table .oct-sale-btn-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.olector-cart-table .oct-sale-btn-danger {
    color: var(--oct-outcome) !important;
    border-color: rgba(217, 83, 79, 0.3) !important;
}

.olector-cart-table .oct-sale-btn-danger:hover {
    background: rgba(217, 83, 79, 0.06) !important;
    border-color: var(--oct-outcome) !important;
}

/* Trade type select — full width row */
.olector-cart-table .oct-sale-select-row {
    margin-top: 10px !important;
}

.olector-cart-table .oct-sale-select-row .oct-form-select {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 36px 10px 16px !important;
}

/* Mobile */
@media (max-width: 400px) {
    .olector-cart-table .oct-sale-actions {
        grid-template-columns: 1fr !important;
    }

    .olector-cart-table .oct-sale-panel {
        padding: 20px 16px !important;
    }
}


/* Toggle button group */
.olector-cart-table .oct-toggle-group {
    display: inline-flex !important;
    border: 1px solid var(--oct-border) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: var(--oct-bg-alt) !important;
    padding: 3px !important;
    gap: 3px !important;
    width: 100% !important;
}

.olector-cart-table .oct-toggle-btn {
    padding: 9px 22px !important;
    border: none !important;
    border-radius: 19px !important;
    background: transparent !important;
    color: var(--oct-text-muted) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    flex: 1 !important;
}

.olector-cart-table .oct-toggle-btn:hover {
    color: var(--oct-text) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

.olector-cart-table .oct-toggle-btn.oct-toggle-active {
    background: var(--oct-text) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}

.olector-cart-table .oct-toggle-btn.oct-toggle-active:hover {
    background: #222 !important;
    color: #fff !important;
}

.olector-cart-table .oct-sale-actions form {
    display: contents !important;
}


/* Title input — duży, czysty */
.olector-cart-table .oct-title-input {
    width: 100% !important;
    padding: 12px 4px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    color: var(--oct-text) !important;
    font-family: inherit !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    outline: none !important;
    transition: border-color var(--oct-transition) !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
}

.olector-cart-table .oct-title-input::placeholder {
    color: var(--oct-text-light) !important;
    font-weight: 600 !important;
}

.olector-cart-table .oct-title-input:focus {
    border-bottom-color: var(--oct-teal) !important;
}

/* Licznik znaków */
.olector-cart-table .oct-char-counter {
    font-size: 11px !important;
    color: var(--oct-text-light) !important;
    text-align: right !important;
    margin-top: 6px !important;
    transition: opacity var(--oct-transition) !important;
}

/* Przycisk zapisz — w wierszu z licznikiem */
.olector-cart-table .oct-title-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 8px !important;
}

.olector-cart-table .oct-title-footer .oct-char-counter {
    margin-top: 0 !important;
}


/* Textarea */
.olector-cart-table .oct-textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid var(--oct-border) !important;
    border-radius: 12px !important;
    background: var(--oct-bg) !important;
    color: var(--oct-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    outline: none !important;
    transition: border-color var(--oct-transition) !important;
    box-shadow: none !important;
    resize: vertical !important;
    min-height: 140px !important;
}

.olector-cart-table .oct-textarea::placeholder {
    color: var(--oct-text-light) !important;
}

.olector-cart-table .oct-textarea:hover {
    border-color: #bbb !important;
}

.olector-cart-table .oct-textarea:focus {
    border-color: var(--oct-teal) !important;
    box-shadow: 0 0 0 3px rgba(91, 197, 167, 0.12) !important;
}


/* Search bar */
.olector-cart-table .oct-search {
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--oct-border) !important;
    border-radius: 22px !important;
    background: var(--oct-bg) !important;
    overflow: hidden !important;
    transition: border-color var(--oct-transition) !important;
}

.olector-cart-table .oct-search:focus-within {
    border-color: var(--oct-teal) !important;
    box-shadow: 0 0 0 3px rgba(91, 197, 167, 0.12) !important;
}

.olector-cart-table .oct-search-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 14px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: var(--oct-text) !important;
    outline: none !important;
    min-width: 0 !important;
}

.olector-cart-table .oct-search-input:focus,
.olector-cart-table .oct-search-input:not(:placeholder-shown) {
    background: #FFF7D6 !important;
}

.olector-cart-table .oct-search-input::placeholder {
    color: var(--oct-text-light) !important;
}

.olector-cart-table .oct-search-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background var(--oct-transition) !important;
    padding: 0 !important;
}

.olector-cart-table .oct-search-btn:hover {
    background: var(--oct-bg-hover) !important;
}

.olector-cart-table .oct-search-btn img {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.5 !important;
    transition: opacity var(--oct-transition) !important;
}

.olector-cart-table .oct-search-btn:hover img {
    opacity: 0.8 !important;
}

.olector-cart-table .oct-search-submit {
    padding: 10px 20px !important;
    border: none !important;
    border-left: 1px solid var(--oct-border-light) !important;
    background: var(--oct-bg-alt) !important;
    color: var(--oct-text) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background var(--oct-transition) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.olector-cart-table .oct-search-submit:hover {
    background: var(--oct-bg-hover) !important;
}


/* ── Navbar container ── */
.oct-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--oct-bg, #ffffff);
    border-bottom: 1px solid var(--oct-border, #e5e5e5);
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 0;
}

.oct-nav::after {
    content: '';
    display: block;
    height: 1px;
    background: #e0e0e0;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
}

.oct-nav-inner {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 100%;
    padding: 0 12px;
    height: 72px;
}

/* ── Logo ── */
.oct-nav-logo {
    flex-shrink: 0;
    margin-right: 16px;
}

.oct-nav-logo img {
    height: 48px;
    width: auto;
}

/* ── Menu items container ── */
.oct-nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.oct-nav-menu::-webkit-scrollbar {
    display: none;
}

/* ── Single nav item ── */
.oct-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.18s ease;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.oct-nav-item:hover {
    background: var(--oct-bg-hover, #f5f7f9);
    text-decoration: none;
}

.oct-nav-item.oct-nav-active {
    background: #ededee;
}

/* Icon wrapper — reuses cart-icon hover swap */
.oct-nav-item .oct-nav-icon {
    position: relative;
    width: 28px;
    height: 28px;
}

.oct-nav-item .oct-nav-icon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    transition: opacity 0.2s ease-in-out;
}

.oct-nav-item .oct-nav-icon .oct-icon-default {
    opacity: 0.65;
}

.oct-nav-item .oct-nav-icon .oct-icon-hover {
    opacity: 0;
}

.oct-nav-item:hover .oct-nav-icon .oct-icon-default {
    opacity: 0;
}

.oct-nav-item:hover .oct-nav-icon .oct-icon-hover {
    opacity: 1;
}

/* Label */
.oct-nav-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--oct-text-muted, #888);
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.18s ease;
}

.oct-nav-item:hover .oct-nav-label {
    color: var(--oct-text, #333);
}

.oct-nav-item.oct-nav-active .oct-nav-label {
    color: var(--oct-text, #333);
    font-weight: 700;
}

/* ── Right actions ── */
.oct-nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Badge na koszyk */
.oct-nav-item .oct-nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #6c757d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Dropdown triggers (lang, currency, user) ── */
.oct-nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.oct-nav-dropdown > a {
    font-size: 12px;
    font-weight: 600;
    color: var(--oct-text-muted, #888);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease;
}

.oct-nav-dropdown > a:hover {
    background: var(--oct-bg-hover, #f5f7f9);
    color: var(--oct-text, #333);
}

/* User avatar */
.oct-nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--oct-border, #e5e5e5);
    transition: border-color 0.18s ease;
    cursor: pointer;
    object-fit: cover;
}

.oct-nav-avatar:hover {
    border-color: #bbb;
}

/* ── Hamburger toggle (mobile) ── */
.oct-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--oct-border, #e5e5e5);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s ease;
}

.oct-nav-toggle:hover {
    background: var(--oct-bg-hover, #f5f7f9);
}

.oct-nav-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--oct-text, #333);
}

/* ── Separator between left/right ── */
.oct-nav-separator {
    width: 1px;
    height: 28px;
    background: var(--oct-border, #e5e5e5);
    margin: 0 8px;
    flex-shrink: 0;
}

/* ── MOBILE ── */
@media (max-width: 991px) {
    .oct-nav-inner {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px;
        gap: 8px;
        row-gap: 6px;
        align-items: center;
    }

    /* hamburger po prawej, w tym samym rzędzie co logo */
    .oct-nav-toggle {
        display: flex;
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* logo wąskie, w pierwszym rzędzie */
    .oct-nav-logo {
        order: 1;
        flex: 0 0 auto;
        margin-right: 0;
    }

    /* menu i akcje łamią się do nowego wiersza dopiero po rozwinięciu */
    .oct-nav-menu {
        order: 3;
    }

    .oct-nav-separator {
        order: 4;
    }

    .oct-nav-actions {
        order: 5;
    }

    .oct-nav-menu,
    .oct-nav-actions,
    .oct-nav-separator {
        display: none !important;
        flex: 0 0 100%; /* pełna szerokość = własny wiersz pod logo/hamburgerem */
        width: 100%;
    }

    .oct-nav-menu.oct-nav-open,
    .oct-nav-actions.oct-nav-open {
        display: flex !important;
        flex-wrap: wrap;
        padding-top: 8px;
        border-top: 1px solid var(--oct-border, #e5e5e5);
    }

    .oct-nav-item {
        width: calc(25% - 2px);
        padding: 10px 4px;
    }

    .oct-nav-actions.oct-nav-open {
        justify-content: flex-start;
        gap: 2px;
    }

    .oct-nav-actions .oct-nav-item,
    .oct-nav-actions .oct-nav-dropdown {
        width: calc(25% - 2px);
        padding: 10px 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .oct-nav-item {
        width: calc(33.33% - 2px);
    }

    .oct-nav-label {
        font-size: 9px;
    }
}


/* ============================================================
   Category tabs bar — stylowanie .nav.nav-tabs bez zmiany HTML
   ============================================================ */
.nav.nav-tabs {
    border-bottom: 1px solid var(--oct-border, #e5e5e5) !important;
    padding: 0 8px !important;
    background: var(--oct-bg, #ffffff) !important;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    gap: 0 !important;
    align-items: center !important;
}

/* Tab link */
.nav.nav-tabs .nav-item .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--oct-text-muted, #888) !important;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
    white-space: nowrap !important;
    background: transparent !important;
}

.nav.nav-tabs .nav-item .nav-link:hover {
    color: var(--oct-text, #333) !important;
    background: var(--oct-bg-hover, #f5f7f9) !important;
    border-bottom-color: transparent !important;
    text-shadow: none !important;
}

/* Active tab — teal underline */
.nav.nav-tabs .nav-item .nav-link.active,
.nav.nav-tabs .nav-item.active .nav-link {
    color: var(--oct-text, #333) !important;
    border-bottom-color: var(--oct-teal, #E6AB5566) !important;
    background: transparent !important;
    font-weight: 700 !important;
}

/* Dropdown caret */
.nav.nav-tabs .nav-link.dropdown-toggle::after {
    font-size: 10px !important;
    opacity: 0.5 !important;
    vertical-align: middle !important;
}

/* Dropdown menu */
.nav.nav-tabs .dropdown-menu {
    border-radius: 10px !important;
    border: 1px solid var(--oct-border, #e5e5e5) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    padding: 6px 0 !important;
    min-width: 160px !important;
    margin-top: 0 !important;
}

.nav.nav-tabs .dropdown-item {
    font-size: 13px !important;
    padding: 7px 16px !important;
    color: var(--oct-text, #333) !important;
    transition: background 0.15s ease !important;
}

.nav.nav-tabs .dropdown-item:hover {
    background: var(--oct-bg-hover, #f5f7f9) !important;
    color: var(--oct-text, #333) !important;
}

.nav.nav-tabs .dropdown-item.active {
    background: var(--oct-bg-hover, #f5f7f9) !important;
    color: var(--oct-text, #333) !important;
    font-weight: 700 !important;
}


.card {
    background: var(--oct-bg, #ffffff) !important;
    border: 1px solid var(--oct-border, #e5e5e5) !important;
    border-radius: var(--oct-radius, 10px) !important;
    box-shadow: var(--oct-shadow, 0 2px 12px rgba(0, 0, 0, 0.06)) !important;
    overflow: hidden !important;
    position: relative !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease !important;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.card::before {
    display: none !important;
}

.card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-2px) !important;
    background: var(--oct-bg, #ffffff) !important;
    cursor: pointer !important;
    z-index: 2 !important; /* hover unosi kartę wizualnie bez najeżdżania na layout */
    position: relative !important;
}

/* Kontener siatki kart — Bootstrap row ma negatywne marginesy które wychodza poza rodzica */
.flex-grow-1 > div > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.flex-grow-1 > div > .row > * {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Card images */
.card .carousel-item img {
    border-radius: 0 !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Card body */
.card .card-body {
    padding: 16px 18px 18px !important;
}

/* Title */
.card .card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--oct-text, #333) !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Price */
.card .card-body h5 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--oct-text, #333) !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
}

.card .card-body h5 .amount {
    font-variant-numeric: tabular-nums !important;
}

.card .card-body h5 .currency {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--oct-text-muted, #888) !important;
    margin-left: 3px !important;
}

/* Description */
.card .card-text {
    font-size: 12px !important;
    color: var(--oct-text-muted, #888) !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

/* Carousel controls inside card */
.card .carousel-control-prev-icon,
.card .carousel-control-next-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid var(--oct-border, #e5e5e5) !important;
    filter: none !important;
    background-size: 10px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.card .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z' fill='%23333'/%3E%3C/svg%3E") !important;
}

.card .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' fill='%23333'/%3E%3C/svg%3E") !important;
}

.card:hover .carousel-control-prev-icon,
.card:hover .carousel-control-next-icon {
    opacity: 1 !important;
}


/* ============================================================
   Purchase form — stylowanie .container form bez zmiany HTML
   ============================================================ */
.container form {
    background: var(--oct-bg, #ffffff);
    border: 1px solid var(--oct-border, #e5e5e5);
    border-radius: var(--oct-radius, 10px);
    box-shadow: var(--oct-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 600px;
    margin: 0 auto;
}

/* Reset .container form styles inside olector components */
.olector-cart-table form,
.olector-picker form {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
}

.container form::before {
    display: none;
}

/* Form rows */
.container form .d-flex.flex-column.flex-md-row {
    padding: 6px 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--oct-border-light, #f0f0f0);
}

.container form .d-flex.flex-column.flex-md-row:last-of-type {
    border-bottom: none;
}

/* Labels */
.container form .form-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--oct-text-muted, #888) !important;
}

/* Text inputs */
.container form .form-control {
    border: 1px solid var(--oct-border, #e5e5e5) !important;
    border-radius: 24px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--oct-text, #333) !important;
    background: var(--oct-bg, #ffffff) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

.container form .form-control:hover {
    border-color: #bbb !important;
}

.container form .form-control:focus {
    border-color: var(--oct-teal, #E6AB5566) !important;
    box-shadow: 0 0 0 3px rgba(91, 197, 167, 0.12) !important;
    background: #fffbee !important;
}

/* Number inputs */
.container form input[type="number"] {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

/* Select */
.container form .form-select {
    border: 1px solid var(--oct-border, #e5e5e5) !important;
    border-radius: 24px !important;
    padding: 10px 36px 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--oct-text, #333) !important;
    background-color: var(--oct-bg, #ffffff) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 6px !important;
}

.container form .form-select:hover {
    border-color: #bbb !important;
}

.container form .form-select:focus {
    border-color: var(--oct-teal, #E6AB5566) !important;
    box-shadow: 0 0 0 3px rgba(91, 197, 167, 0.12) !important;
}

/* Textarea */
.container form textarea.form-control {
    border-radius: 12px !important;
    min-height: 100px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* Submit button */
.container form .btn-outline-primary {
    border: none !important;
    border-radius: 24px !important;
    background: var(--oct-text, #333) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 11px 32px !important;
    transition: background 0.18s ease, box-shadow 0.18s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.container form .btn-outline-primary:hover {
    background: #222 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    color: #fff !important;
}

@media (max-width: 600px) {
    .container form {
        padding: 20px 16px;
    }

    .container form .btn-outline-primary {
        width: 100% !important;
    }
}

/* ── Push notification toast ── */
.oct-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.oct-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border-left: 4px solid var(--oct-teal, #0d9488);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
    padding: 14px 16px;
    max-width: 380px;
    min-width: 280px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
    cursor: pointer;
}

.oct-toast.oct-toast-show {
    transform: translateX(0);
    opacity: 1;
}

.oct-toast.oct-toast-hide {
    transform: translateX(120%);
    opacity: 0;
}

.oct-toast-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--oct-teal, #0d9488);
    display: flex;
    align-items: center;
    justify-content: center;
}

.oct-toast-icon img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.oct-toast-body {
    flex: 1;
    min-width: 0;
}

.oct-toast-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oct-toast-text {
    font-size: 12px;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.oct-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.oct-toast-close:hover {
    color: #333;
}

/* ── Navbar notification bell ── */
.oct-nav-bell {
    position: relative;
    cursor: pointer;
}

.oct-nav-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

@media (max-width: 991px) {
    .oct-toast {
        max-width: calc(100vw - 32px);
        min-width: 0;
    }
}


/* ============================================================
   oct-pill-group — paginacja i selektory w stylu oct-
   ============================================================ */
.oct-pill-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--oct-border, #e5e5e5);
    border-radius: 22px;
    background: var(--oct-bg-alt, #fafafa);
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    /* overflow: hidden usuniete - ucinalo dropdown menu */
}

/* Zaokraglenie krawedzi skrajnych elementow zamiast overflow:hidden na kontenerze */
.oct-pill-group > :first-child,
.oct-pill-group > :first-child > .oct-pill-btn,
.oct-pill-group > :first-child > .dropdown-toggle {
    border-radius: 22px 0 0 22px;
}

.oct-pill-group > :last-child,
.oct-pill-group > :last-child > .oct-pill-btn,
.oct-pill-group > :last-child > .dropdown-toggle {
    border-radius: 0 22px 22px 0;
}

.oct-pill-group > .oct-pill-btn:first-child {
    border-radius: 22px 0 0 22px;
}

.oct-pill-group > .oct-pill-btn:last-child {
    border-radius: 0 22px 22px 0;
}

.oct-pill-btn {
    border: none;
    background: var(--oct-bg-alt, #fafafa);
    color: var(--oct-text-muted, #888);
    padding: 5px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
    line-height: 1.4;
    outline: none;
}

.oct-pill-btn:hover {
    background: var(--oct-bg-hover, #f5f7f9);
    color: var(--oct-text, #333);
}

.oct-pill-btn:disabled,
.oct-pill-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Przycisk z wartością aktywną (numer strony, ilość) */
.oct-pill-btn.oct-pill-value {
    background: var(--oct-bg-white, #ffffff);
    color: var(--oct-text, #333);
    font-weight: 700;
}

.oct-pill-btn.oct-pill-value:hover {
    background: var(--oct-bg-hover, #f5f7f9);
}

/* Etykieta nieaktywna ("na stronie") */
.oct-pill-label {
    padding: 5px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--oct-text-light, #aaa);
    background: var(--oct-bg-alt, #fafafa);
    white-space: nowrap;
    user-select: none;
    line-height: 1.4;
}

/* Separator między segmentami */
.oct-pill-group .oct-pill-sep {
    width: 1px;
    align-self: stretch;
    background: var(--oct-border, #e5e5e5);
    flex-shrink: 0;
}

/* Dropdown wewnątrz pill-group */
.oct-pill-group .dropdown-toggle {
    border: none;
    border-radius: 0;
    background: var(--oct-bg-white, #ffffff);
    color: var(--oct-text, #333);
    padding: 5px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease;
    outline: none;
    line-height: 1.4;
    box-shadow: none;
}

.oct-pill-group .dropdown-toggle:hover,
.oct-pill-group .dropdown-toggle:focus,
.oct-pill-group .dropdown-toggle:active,
.oct-pill-group .dropdown-toggle.show {
    background: var(--oct-bg-hover, #f5f7f9);
    color: var(--oct-text, #333);
    box-shadow: none;
    outline: none;
}

.oct-pill-group .dropdown-menu {
    border-radius: 10px !important;
    border: 1px solid var(--oct-border, #e5e5e5) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    padding: 6px 0 !important;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.oct-pill-group .dropdown-item {
    font-size: 13px;
    padding: 7px 16px;
    color: var(--oct-text, #333);
    font-weight: 500;
    transition: background 0.15s ease;
}

.oct-pill-group .dropdown-item:hover {
    background: var(--oct-bg-hover, #f5f7f9);
    color: var(--oct-text, #333);
}

.oct-pill-group .dropdown-item.active {
    background: var(--oct-bg-hover, #f5f7f9) !important;
    color: var(--oct-text, #333) !important;
    font-weight: 700;
}

/* ============================================================
   Empty state / info alert
   ============================================================ */
.oct-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 24px;
    border-radius: var(--oct-radius, 10px);
    border: 1.5px dashed var(--oct-border, #e5e5e5);
    background: var(--oct-bg-alt, #fafafa);
    color: var(--oct-text-muted, #888);
    text-align: center;
}

.oct-empty-state .oct-empty-icon {
    font-size: 32px;
    opacity: 0.45;
    line-height: 1;
}

.oct-empty-state .oct-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--oct-text, #333);
    margin: 0;
}

.oct-empty-state .oct-empty-desc {
    font-size: 13px;
    color: var(--oct-text-muted, #888);
    margin: 0;
}

/* ============================================================
   Alert variants: warning, error, quiet, info
   ============================================================ */
.oct-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--oct-radius, 10px);
    font-size: 13px;
    line-height: 1.5;
}

.oct-alert .oct-alert-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.oct-alert .oct-alert-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oct-alert .oct-alert-title {
    font-weight: 700;
    font-size: 13px;
    margin: 0;
}

.oct-alert .oct-alert-desc {
    font-size: 12px;
    margin: 0;
    opacity: 0.85;
}

/* Warning */
.oct-alert-warning {
    background: #fff8ec;
    border: 1px solid #f5c97a;
    color: #7a4f00;
}

.oct-alert-warning .oct-alert-title {
    color: #7a4f00;
}

/* Error */
.oct-alert-error {
    background: #fff0f0;
    border: 1px solid #f5a0a0;
    color: #7a0000;
}

.oct-alert-error .oct-alert-title {
    color: #7a0000;
}

/* Quiet — delikatne, bez ramki */
.oct-alert-quiet {
    background: var(--oct-bg-alt, #fafafa);
    border: 1px solid var(--oct-border-light, #f0f0f0);
    color: var(--oct-text-muted, #888);
}

.oct-alert-quiet .oct-alert-title {
    color: var(--oct-text, #333);
    font-weight: 600;
}

/* Info */
.oct-alert-info {
    background: #f0f6ff;
    border: 1px solid #a8c8f5;
    color: #1a3a5c;
}

.oct-alert-info .oct-alert-title {
    color: #1a3a5c;
}

.container form.oct-chat-form {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.oct-nav-category-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--oct-text-muted, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Chat box — karty wiadomości bez shadow i border ── */
#chatBox .card {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
}

#chatBox .card:hover {
    box-shadow: none !important;
    transform: none !important;
    background: transparent !important;
    cursor: default !important;
}

#map {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ── Karty na stronie Obserwujesz ── */
.observations-cards .row.row-cols-md-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 30px !important;
    gap: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.observations-cards .row.row-cols-md-3 > .card {
    width: 18rem !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.observations-cards .card img {
    display: block;
    margin: 0 auto;
}

/* =========================================================================
   jbs.css — opisy produktów (olector.com) — moduł oct-product
   Dołącz ten blok do jbs.css. Wszystko zakresowane pod .oct-product,
   więc nie koliduje z resztą strony.
   ========================================================================= */

.oct-product {
    /* tokeny — zmień pod paletę olector.com */
    --oct-ink: #1f1f1d;
    --oct-steel: #3d4550;
    --oct-accent: #b5872a; /* złoto / mosiądz — pasuje do kolekcjonerstwa */
    --oct-rule: #ddd8cc;
    --oct-pale: #f6f4ee;
    --oct-muted: #6f6d66;

    max-width: 860px;
    margin: 0 auto;
    color: var(--oct-ink);
    font-family: "Georgia", "Times New Roman", serif;
    line-height: 1.7;
    font-size: 16px;
}

/* ---- Nagłówek produktu ---- */
.oct-product-header {
    border-bottom: 3px double var(--oct-rule);
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
}

.oct-title {
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    line-height: 1.18;
    font-weight: 700;
    color: var(--oct-steel);
    margin: 0 0 .5rem;
}

.oct-subtitle {
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: var(--oct-muted);
    border-left: 3px solid var(--oct-accent);
    border-radius: 0;
    padding-left: .8rem;
    margin: 0;
}

/* ---- Sekcje ---- */
.oct-section {
    margin: 2.25rem 0;
}

.oct-section-title {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--oct-accent);
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1rem;
}

.oct-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--oct-rule);
}

/* ---- Tekst ---- */
.oct-text {
    margin: 0 0 .9rem;
}

.oct-lead {
    font-size: 1.08rem;
    color: var(--oct-steel);
}

.oct-strong {
    font-weight: 700;
    color: var(--oct-steel);
}

/* ---- Lista parametrów (label: wartość) ---- */
.oct-specs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oct-spec-item {
    display: block;
    padding: .6rem 0;
    border-bottom: 1px solid var(--oct-rule);
}

.oct-spec-label {
    display: block;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--oct-accent);
    margin-bottom: .15rem;
}

.oct-spec-value {
    display: block;
    font-family: inherit;
    font-weight: 400;
    color: var(--oct-ink);
    text-align: left;
}

/* ---- Listy faktów / ciekawostek ---- */
.oct-facts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oct-fact {
    position: relative;
    padding: .35rem 0 .35rem 1.5rem;
}

.oct-fact::before {
    content: "";
    position: absolute;
    left: 0;
    top: .95rem;
    width: 7px;
    height: 7px;
    background: var(--oct-accent);
    transform: rotate(45deg); /* romb — drobny akcent katalogowy */
}

/* ---- Sekcja producenta / informacje handlowe ---- */
.oct-producer {
    background: var(--oct-pale);
    border-left: 4px solid var(--oct-accent);
    border-radius: 0;
    padding: 1.1rem 1.35rem;
}

.oct-producer .oct-section-title {
    margin-bottom: .6rem;
}

.oct-producer .oct-text {
    margin: 0;
    font-size: .94rem;
    color: var(--oct-muted);
}

/* ---- Linki ---- */
.oct-link {
    color: var(--oct-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}

.oct-link:hover {
    border-bottom-color: var(--oct-accent);
}

.oct-link-external::after {
    content: " ↗";
    font-size: .85em;
    color: var(--oct-muted);
}

/* ---- Nota prawna ---- */
.oct-legal {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--oct-rule);
    font-family: Arial, sans-serif;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--oct-muted);
}

/* ---- Responsywność ---- */
@media (max-width: 560px) {
    .oct-product {
        font-size: 15px;
    }
}

:root {
    --oct-navbar-h: 73px; /* wysokość navbara na desktopie */
}

/* navbar zmienia wysokość na <=991px (oct-nav-inner: height auto + padding) */
@media (max-width: 991px) {
    :root {
        --oct-navbar-h: 64px;
    }
}

.breadcrumb-wrapper {
    position: sticky;
    top: var(--oct-navbar-h);
    z-index: 1020;
    background: #fff;
}

@media (max-width: 991px) {
    .breadcrumb-wrapper > ul.nav-tabs {
        flex-wrap: wrap !important; /* kategorie zawijają się do kolejnych wierszy */
        row-gap: 2px; /* odstęp między zawiniętymi wierszami */
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

.dropdown-menu.pagination-dropdown {
    min-width: 70px;
}

.oct-nav-dropdown--labeled {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.oct-nav-dropdown--labeled .oct-nav-sublabel {
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
    color: #888;
    text-align: center;
    margin-bottom: 2px;
}

.offcanvas {
    font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}