/* ==============================================================================
 * BENTO ACCOUNT STYLES - ZŁOTY STANDARD
 * ==============================================================================
 * Plik: bento-account.css
 * Opis: Wszelkie style widoków Strefy Klienta (Moje Konto, Logowanie, Rejestracja, 
 *       Historia zamówień, Adresy). Plik zależy od tokenów w bento-uikit.css.
 * 
 * SPIS TREŚCI:
 * 1. RESET I BAZA KONTA (Ukrycie domyślnych struktur PrestaShop)
 * 2. LAYOUT GŁÓWNY I SIDEBAR (Grid konta, Nawigacja boczna)
 * 3. KAFELKI I WIDOKI KONTENTA (Hero, Adresy)
 * 4. HISTORIA I SZCZEGÓŁY ZAMÓWIEŃ (Data Rows, Statusy konta)
 * 5. FORMULARZE STREFY KLIENTA (Logowanie, Rejestracja, Toasty)
 * ============================================================================== */

/* ============================================================
   BENTO UI - STREFA KLIENTA (RESTORED OLD VIEW)
   ============================================================ */

body#authentication .page-content,
body#registration .page-content,
body#password .page-content,
body#identity .page-content,
body#module-psgdpr-gdpr .page-content,
body#address .page-content,
body#addresses .page-content,
body#my-account .page-content,
body#history .page-content,
body#order-slip .page-content,
body#order-follow .page-content,
body#discount .page-content,
body#order-detail .page-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

body#my-account .card,
body#identity .card,
body#history .card,
body#addresses .card,
body#address .card,
body#order-slip .card,
body#order-follow .card,
body#discount .card,
body#order-detail .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body#my-account #wrapper,
body#my-account #main,
body#my-account #content,
body#my-account .page-content,
body#my-account #content-wrapper,
body#identity #wrapper,
body#identity #main,
body#identity #content,
body#identity .page-content,
body#identity #content-wrapper,
body#history #wrapper,
body#history #main,
body#history #content,
body#history .page-content,
body#history #content-wrapper,
body#addresses #wrapper,
body#addresses #main,
body#addresses #content,
body#addresses .page-content,
body#addresses #content-wrapper,
body#address #wrapper,
body#address #main,
body#address #content,
body#address .page-content,
body#address #content-wrapper,
body#authentication #wrapper,
body#authentication #main,
body#authentication #content,
body#authentication .page-content,
body#authentication #content-wrapper,
body#registration #wrapper,
body#registration #main,
body#registration #content,
body#registration .page-content,
body#registration #content-wrapper,
body#order-slip #wrapper,
body#order-slip #main,
body#order-slip #content,
body#order-slip .page-content,
body#order-slip #content-wrapper,
body#order-follow #wrapper,
body#order-follow #main,
body#order-follow #content,
body#order-follow .page-content,
body#order-follow #content-wrapper,
body#discount #wrapper,
body#discount #main,
body#discount #content,
body#discount .page-content,
body#discount #content-wrapper,
body#order-detail #wrapper,
body#order-detail #main,
body#order-detail #content,
body#order-detail .page-content,
body#order-detail #content-wrapper,
body#module-psgdpr-customerPersonalData #wrapper,
body#module-psgdpr-customerPersonalData #main,
body#module-psgdpr-customerPersonalData #content,
body#module-psgdpr-customerPersonalData .page-content,
body#module-psgdpr-customerPersonalData #content-wrapper,
body#module-ps_emailalerts-account #wrapper,
body#module-ps_emailalerts-account #main,
body#module-ps_emailalerts-account #content,
body#module-ps_emailalerts-account .page-content,
body#module-ps_emailalerts-account #content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
}

.btx-account-layout {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 2rem !important;
    align-items: start !important;
    margin: 40px 0 2rem 0 !important;
    width: 100% !important;
}

@media (max-width: 991px) {
    .btx-account-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

.btx-account-sidebar {
    background: var(--btx-bg-tile) !important; /* Pełna biel zamiast szkła */
    /* backdrop-filter: var(--btx-glass-blur) !important; */
    /* -webkit-backdrop-filter: var(--btx-glass-blur) !important; */
    border-radius: var(--btx-radius-2xl) !important;
    padding: var(--btx-tile-padding) !important;
    box-shadow: var(--btx-shadow-tile) !important; /* Ujednolicenie cienia z resztą kafelków */
    border: 1px solid rgba(0, 0, 0, 0.06) !important; /* Ujednolicenie ramki */
    position: sticky !important;
    top: 40px !important;
    align-self: start !important;
}

aside.btx-account-sidebar div.btx-sidebar-header {
    margin-bottom: var(--btx-gap-lg) !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    /* Idealne wyrównanie do lewej krawędzi sidebara (w róg) */
    border: none !important;
    background: transparent !important;
}

/* HARD FIX DLA SMARTY CACHE - wymuszenie wyglądu badge'a dla MOJE KONTO na poziomie klasy, bez zależności od ułożenia tagów */
.btx-sidebar-title {
    background: var(--btx-bg-input) !important;
    color: var(--btx-text-tertiary) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: var(--btx-radius-pill) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    letter-spacing: 0.05em !important;
    pointer-events: none !important;
    display: inline-flex !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}


.btx-account-nav,
.btx-modules-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Zerowanie kontenerów generowanych przez wtyczki Presty na dole sidebara */
.btx-modules-wrapper>div,
.btx-modules-wrapper>ul,
.btx-modules-wrapper>li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
    width: 100% !important;
}

.btx-account-nav a:not(.btx-btn) {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.85rem 1.2rem !important;
    border-radius: 12px !important; /* Miękki prostokąt - idealnie wpisuje się w narożniki rodzica (28px) */
    color: var(--btx-text-secondary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
}

.btx-account-nav a:not(.btx-btn) span {
    transition: color 0.2s ease !important;
}

.btx-account-nav a:not(.btx-btn) i,
.btx-account-nav a:not(.btx-btn) .material-icons {
    color: var(--btx-text-secondary) !important;
    font-size: 20px !important;
    transition: color var(--btx-transition-fast) !important;
}

@media (hover: hover) {
    .btx-account-nav a:not(.btx-btn):hover:not(.active) {
        background: #f8f9fa !important;
        color: var(--btx-color-primary) !important;
    }

    .btx-account-nav a:not(.btx-btn):hover:not(.active) span,
    .btx-account-nav a:not(.btx-btn):hover:not(.active) i,
    .btx-account-nav a:not(.btx-btn):hover:not(.active) .material-icons {
        color: var(--btx-color-primary) !important;
    }
}

.btx-account-nav a:not(.btx-btn),
.btx-modules-wrapper a,
.btx-modules-wrapper .list-group-item {
    -webkit-tap-highlight-color: transparent !important;
}

.btx-account-nav a:not(.btx-btn):active,
.btx-account-nav a.btx-touch-active,
.btx-modules-wrapper a:active,
.btx-modules-wrapper a.btx-touch-active,
.btx-modules-wrapper .list-group-item:active,
.btx-modules-wrapper .list-group-item.btx-touch-active {
    transform: scale(0.98) !important;
    background: transparent !important;
}

/* Przycisk WYLOGUJ - zostawiamy CZYSTY styl z UI Kitu */
.btx-account-sidebar .btx-btn-logout-full {
    margin-top: 2rem !important;
}

/* Kompleksowy reset i stylowanie dla modułów na dole sidebara */
.btx-modules-wrapper a,
.btx-modules-wrapper .list-group-item,
.btx-modules-wrapper [class*="col-"] {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

/* Wymuszenie odstępu wewnątrz ukrytych spanów (często Presta je dodaje w modułach) */
.btx-modules-wrapper a>span {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
}

.btx-modules-wrapper a,
.btx-modules-wrapper .list-group-item,
.btx-modules-wrapper [class*="col-"] {
    padding: 0.85rem 1.2rem !important;
    border-radius: 12px !important;
    color: var(--btx-text-secondary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.3 !important;
}

.btx-modules-wrapper a i,
.btx-modules-wrapper a .material-icons,
.btx-modules-wrapper .list-group-item i,
.btx-modules-wrapper .list-group-item .material-icons {
    font-size: 20px !important;
    color: var(--btx-text-secondary) !important;
    flex-shrink: 0 !important;
    transition: color var(--btx-transition-fast) !important;
}

@media (hover: hover) {

    .btx-modules-wrapper a:hover,
    .btx-modules-wrapper .list-group-item:hover {
        background: #f8f9fa !important;
        color: var(--btx-color-primary) !important;
    }

    .btx-modules-wrapper a:hover i,
    .btx-modules-wrapper a:hover .material-icons,
    .btx-modules-wrapper .list-group-item:hover i,
    .btx-modules-wrapper .list-group-item:hover .material-icons {
        color: var(--btx-color-primary) !important;
    }
}

.btx-modules-wrapper a:active,
.btx-modules-wrapper .list-group-item:active {
    transform: var(--btx-active-scale) !important;
}

/* Usunięte nadpisywanie ikon przez CSS, teraz ikony są bezpośrednio w TPL modułów */

/* Aktywny link w menu strefy klienta */
.btx-account-nav a.active,
.btx-modules-wrapper a.active,
.btx-modules-wrapper .list-group-item.active {
    background: var(--btx-color-primary) !important; /* Zinc 900 zamiast #000000 */
    color: #ffffff !important;
}

.btx-account-nav a.active span,
.btx-account-nav a.active i,
.btx-account-nav a.active .material-icons,
.btx-modules-wrapper a.active span,
.btx-modules-wrapper a.active i,
.btx-modules-wrapper a.active .material-icons,
.btx-modules-wrapper .list-group-item.active i,
.btx-modules-wrapper .list-group-item.active .material-icons {
    color: #ffffff !important;
}

.btx-account-main {
    flex: 1 !important;
    min-width: 0;
}

@media (max-width: 991px) {
    .btx-account-main,
    .btx-account-main.page-content,
    .page-content.btx-account-main {
        margin-top: 0 !important;
    }
    
    .btx-account-content {
        margin-top: 0 !important;
    }
    
    .btx-account-layout {
        margin-top: 16px !important;
    }
    
    .btx-account-main {
        padding: 16px !important;
        background: #f4f4f4;
    }
}

.btx-account-main .btx-tile,
.btx-account-dashboard .btx-tile,
.btx-account-content .btx-tile {
    width: 100% !important;
    margin-bottom: var(--btx-gap-lg) !important;
}

.btx-account-hero {
    position: relative !important;
    padding: var(--btx-tile-padding) !important;
    background: var(--btx-bg-tile) !important;
    border-radius: var(--btx-radius-2xl) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: var(--btx-shadow-tile) !important;
}

.btx-hero-profile-row {
    display: flex !important;
    align-items: center !important;
    gap: var(--btx-gap-lg) !important;
}

.btx-hero-edit {
    margin-left: auto !important;
}

.btx-hero-avatar {
    width: 80px !important;
    height: 80px !important;
    background: var(--btx-color-primary) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.btx-hero-avatar span {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}

.btx-hero-name {
    font-size: var(--btx-text-xl) !important;
    font-weight: 800 !important;
    margin: 0 0 4px 0 !important;
    color: var(--btx-text-primary) !important;
}

.btx-hero-details-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--btx-gap-md) !important;
    margin-top: var(--btx-gap-lg) !important;
}

@media (max-width: 768px) {
    .btx-hero-profile-row {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--btx-gap-md) !important;
    }

    .btx-hero-edit {
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: var(--btx-gap-sm) !important;
    }

    .btx-hero-edit .btx-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .btx-hero-details-grid {
        grid-template-columns: 1fr !important;
        margin-top: var(--btx-gap-xl) !important;
    }
}

/* Elementy .btx-detail-item przeniesione do bento-uikit.css */

/* Style stopki zostały przeniesione do skonsolidowanej sekcji 8 na dole pliku */


/*    16. BENTO GRID HOMEPAGE - DARK TECH THEME */


/* ============================================================
   ==================== PRZENIESIONE Z DOLNYCH SEKCJI ====================
   ============================================================ */

/*    BENTO UI - PODSTRONY KONTENTA STREFY KLIENTA (KROK 1) */

/* 1a. Bazowy Kontener i Kafelki Bento */
.btx-account-content {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--btx-gap-lg) !important;
    width: 100% !important;
}

.btx-account-content .btx-tile,
.btx-auth-wrapper .btx-tile {
    background: var(--btx-bg-tile) !important;
    border-radius: var(--btx-radius-2xl) !important;
    padding: var(--btx-tile-padding) !important;
    box-shadow: var(--btx-shadow-tile) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    width: 100% !important;
    position: relative !important;
    transition: box-shadow var(--btx-transition-fast), border-color var(--btx-transition-fast) !important;
}

/* Pozycjonowanie badge na kartach panelu klienta i formularzach autoryzacji w lewym górnym rogu */
.btx-account-main .btx-tile .btx-pill.btx-footer-badge,
.btx-auth-tile .btx-pill.btx-footer-badge {
    position: absolute !important;
    top: var(--btx-tile-padding) !important;
    left: var(--btx-tile-padding) !important;
    margin: 0 !important;
}

/* Padding dla pierwszego kontenera w karcie, żeby zrobić miejsce na badge, jeśli badge jest absolute. */
.btx-account-main .btx-tile > .btx-pill.btx-footer-badge + * {
    margin-top: 64px !important;
}

.btx-auth-wrapper .btx-auth-tile {
    padding-top: 72px !important;
}

.btx-auth-tile form {
    margin-top: 0 !important;
}

/* 1b. Siatka Adresów */
.btx-address-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--btx-gap-md) !important;
    margin-top: var(--btx-gap-lg) !important;
    margin-bottom: var(--btx-gap-lg) !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .btx-address-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.btx-address-item {
    background: var(--btx-bg-page) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--btx-radius-lg) !important;
    padding: var(--btx-tile-padding) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 180px !important;
    transition: all var(--btx-transition-fast) !important;
}

/* Interakcja dotykowa / Anti-Sticky Hover */
@media (hover: hover) {
    .btx-address-item:hover {
        border-color: var(--btx-color-primary) !important;
        background: var(--btx-bg-tile-hover) !important;
        transform: var(--btx-hover-lift) !important;
        box-shadow: var(--btx-shadow-tile-hover) !important;
    }
}

.btx-address-item:active {
    transform: var(--btx-active-scale) !important;
    opacity: 0.9 !important;
}

/* Wewnętrzne elementy block-address Presty */
.btx-address-item address {
    font-style: normal !important;
    color: var(--btx-text-secondary) !important;
    font-size: var(--btx-text-sm) !important;
    line-height: 1.6 !important;
    margin: 0 0 var(--btx-gap-md) 0 !important;
}

.btx-address-item address h4 {
    font-size: var(--btx-text-md) !important;
    font-weight: 800 !important;
    color: var(--btx-text-primary) !important;
    margin: 0 0 var(--btx-gap-sm) 0 !important;
}

.btx-address-item .address-footer {
    display: flex !important;
    gap: var(--btx-gap-md) !important;
    align-items: center !important;
    margin-top: auto !important;
    border-top: var(--btx-border-dashed) !important;
    padding-top: var(--btx-gap-sm) !important;
}

.btx-address-item .address-footer a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: var(--btx-text-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--btx-text-secondary) !important;
    text-decoration: none !important;
    transition: color var(--btx-transition-fast) !important;
}

@media (hover: hover) {
    .btx-address-item .address-footer a:hover {
        color: var(--btx-color-primary) !important;
    }
}

.btx-address-item .address-footer a i {
    font-size: 16px !important;
}

.btx-address-footer {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: var(--btx-gap-lg) !important;
}

/* 1c. Puste Stany (Empty State) */
.btx-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 60px 20px !important;
    background: var(--btx-bg-page) !important;
    border-radius: var(--btx-radius-xl) !important;
    border: var(--btx-border-width) solid var(--btx-border-input) !important;
    margin: 56px 0 16px 0 !important;
}

/* Wymuszenie odstępu górnego, żeby nadpisać ogólną regułę 36px dla nagłówków kafelków */
.btx-account-main .btx-tile > .btx-pill.btx-footer-badge + .btx-empty-state {
    margin-top: 56px !important;
}

@media (max-width: 768px) {
    .btx-empty-state {
        min-height: calc(100dvh - 180px) !important;
    }
}


/*    BENTO UI - HISTORIA I SZCZEGÓŁY ZAMÓWIEŃ (KROK 2) */

/* 2a. Historia Zamówień (Order History) */
.btx-history-col {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--btx-gap-lg) !important;
    width: 100% !important;
}

.btx-order-tile {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) auto !important;
    align-items: center !important;
    gap: 16px !important;
    position: relative !important;
}

span.btx-pill.btx-order-badge,
span.btx-pill.btx-timeline-badge {
    position: absolute !important;
    top: var(--btx-tile-padding) !important;
    right: var(--btx-tile-padding) !important;
    margin: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    /* Domyślny, bezpieczny fallback (gdyby przeglądarka nie wspierała color-mix np. starsze Safari) */
    background: var(--badge-color) !important;
    color: #ffffff !important;
    border: none !important;
}

span.btx-pill.btx-timeline-badge {
    position: static !important;
}

/* Magia Bento: dynamiczne kolory z panelu admina (zadziała na nowszych ekranach) */
@supports (color: color-mix(in srgb, red, blue)) {
    span.btx-pill.btx-order-badge,
    span.btx-pill.btx-timeline-badge {
        color: var(--badge-color) !important;
        background: color-mix(in srgb, var(--badge-color) 12%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--badge-color) 25%, transparent) !important;
    }
}

/* Auth tile na mobile - miejsce na absolute badge */
@media (max-width: 768px) {
    .btx-auth-wrapper .btx-auth-tile {
        padding-top: 72px !important;
    }

    .btx-auth-tile form,
    .btx-auth-tile form:first-of-type {
        margin-top: 0 !important;
    }

    .btx-auth-tile > h1.btx-pill + form,
    .btx-auth-tile > h1.btx-pill ~ * {
        margin-top: 0 !important;
    }
}

/* Wersja mobilna: rozbicie na kolumnę, badge jako pierwszy wiersz */
@media (max-width: 768px) {
    .btx-order-tile {
        grid-template-columns: 1fr !important;
        align-items: flex-start !important;
        /* Padding wraca do normy, bo badge układa się w gridzie (nie jest absolute) */
        padding: var(--btx-tile-padding) !important;
    }

    span.btx-pill.btx-order-badge {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-bottom: 0 !important; /* Odstęp załatwia gap grida */
        justify-self: end !important; /* Wyrównanie do prawej na poziomej osi Grida */
    }
    
    .btx-history-actions {
        width: 100% !important;
        margin-top: var(--btx-gap-md) !important;
    }
    
    .btx-history-actions a {
        flex: 1 !important;
        justify-content: center !important;
    }
}

.btx-history-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.btx-orders-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--btx-gap-md) !important;
    width: 100% !important;
}

/* Wyłączony hover i active dla kafelków poszczególnych zamówień */
.btx-order-card:hover {
    border-color: var(--btx-border-color) !important;
    background: var(--btx-bg-page) !important;
    transform: none !important;
    box-shadow: none !important;
}

.btx-order-card:active {
    transform: none !important;
}

.btx-order-header {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--btx-gap-md) !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .btx-order-header {
        display: grid !important;
        grid-template-columns: 1fr auto auto auto !important;
        align-items: center !important;
        gap: var(--btx-gap-lg) !important;
    }
}

.btx-order-id-group {
    display: flex !important;
    align-items: center !important;
    gap: var(--btx-gap-md) !important;
}

.btx-order-icon {
    width: 44px !important;
    height: 44px !important;
    background: var(--btx-bg-tile) !important;
    border-radius: var(--btx-radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.btx-order-icon i {
    font-size: 20px !important;
    color: var(--btx-text-secondary) !important;
}

.btx-order-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.btx-order-number {
    font-size: var(--btx-text-md) !important;
    font-weight: 800 !important;
    color: var(--btx-text-primary) !important;
}

.btx-order-date {
    font-size: var(--btx-text-xs) !important;
    color: var(--btx-text-tertiary) !important;
    font-weight: 600 !important;
}

.btx-order-actions-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: var(--btx-gap-md) !important;
}

@media (min-width: 768px) {
    .btx-order-actions-group {
        display: contents !important;
    }

    .btx-order-header .btx-status-badge {
        justify-self: center !important;
        /* Centrowanie w kolumnie dla równego rozkładu */
        text-align: center !important;
    }

    .btx-order-header .btx-order-price {
        justify-self: center !important;
        /* Centrowanie ceny w kolumnie bez zapychania na prawą krawędź */
        text-align: center !important;
    }
}

.btx-order-price {
    font-size: var(--btx-text-md) !important;
    font-weight: 800 !important;
    color: var(--btx-text-primary) !important;
}

.btx-order-footer-links {
    display: flex !important;
    align-items: center !important;
    gap: var(--btx-gap-sm) !important;
}

@media (min-width: 768px) {
    .btx-order-header .btx-order-footer-links {
        justify-self: end !important;
    }
}

@media (max-width: 767px) {
    .btx-order-footer-links {
        margin-top: var(--btx-gap-sm) !important;
        border-top: var(--btx-border-dashed) !important;
        padding-top: var(--btx-gap-sm) !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }
}

/* 2b. Szczegóły Zamówienia (Order Detail Page) */
.btx-order-detail-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.btx-account-main .btx-order-detail-page .btx-tile {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
}

.btx-account-main .btx-tile.btx-order-summary-tile > .btx-pill.btx-footer-badge + .btx-order-summary-content {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--btx-gap-lg) !important;
    margin-top: 56px !important; /* Wymuszony odstęp pod przyciskiem wstecz o wysokim priorytecie */
}

@media (min-width: 768px) {
    .btx-account-main .btx-tile.btx-order-summary-tile > .btx-pill.btx-footer-badge + .btx-order-summary-content {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 64px !important;
    }
}

/* Adresy w szczegółach zamówienia — tylko do odczytu, bez hover/active */
.btx-addresses-tile .btx-address-item {
    pointer-events: none !important;
    cursor: default !important;
}
@media (hover: hover) {
    .btx-addresses-tile .btx-address-item:hover {
        border-color: var(--btx-border-color) !important;
        background: var(--btx-bg-page) !important;
        transform: none !important;
        box-shadow: none !important;
    }
}
.btx-addresses-tile .btx-address-item:active {
    transform: none !important;
    opacity: 1 !important;
}

/* Textarea w formularzach zamówienia — bez uchwytu resize */
.btx-order-message-form textarea,
.btx-order-return-section textarea {
    resize: none !important;
}

/* Focus na wszystkich inputach i textarea — cieńsza ramka */
.btx-form-control:focus,
.btx-form-control:focus-visible,
textarea.btx-form-control:focus,
textarea.btx-form-control:focus-visible {
    border: 1px solid var(--btx-neutral-400) !important;
    outline: none !important;
    box-shadow: none !important;
}

.btx-order-return-section .btx-return-actions {
    margin-bottom: 16px !important;
}

.btx-summary-info-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: var(--btx-gap-lg) !important;
    width: 100% !important;
}

.btx-summary-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.btx-summary-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--btx-text-muted) !important;
}

.btx-summary-value {
    font-size: var(--btx-text-sm) !important;
    font-weight: 600 !important;
    color: var(--btx-text-primary) !important;
}

/* --- BUTTON SAFE AREA MOBILE --- 
   Zapewnia idealnie równe odstępy (32px) nad i pod głównymi przyciskami na dole kafelków, 
   aby stworzyć bezpieczną strefę kliknięcia na ekranach dotykowych. */
.btx-summary-actions,
.btx-return-actions,
.btx-address-footer,
.btx-order-message-form .form-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--btx-gap-sm) !important;
    justify-content: center !important;
    width: 100% !important;
    /* Równe 32px nad i pod (16px z tile padding + 16px margin) */
    margin-top: 32px !important;
    margin-bottom: 16px !important;
}

@media (min-width: 768px) {
    .btx-summary-actions {
        width: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .btx-return-actions,
    .btx-address-footer,
    .btx-order-message-form .form-footer {
        margin-top: 24px !important;
        margin-bottom: 0 !important; /* Na desktopie tile padding to 24px, więc jest równe 24px z obu stron */
    }
    
    .btx-summary-info-grid {
        width: auto !important;
        flex: 1 !important;
    }
}

.btx-gift-message {
    margin-top: var(--btx-gap-md) !important;
    padding: var(--btx-gap-md) !important;
    background: var(--btx-bg-page) !important;
    border-radius: var(--btx-radius-lg) !important;
    border-left: 4px solid var(--btx-color-primary) !important;
    font-size: var(--btx-text-sm) !important;
    color: var(--btx-text-secondary) !important;
}

/* Kafel: Tytuł Sekcji wewnętrznej */
.btx-tile-title {
    font-size: var(--btx-text-md) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--btx-text-primary) !important;
    margin: 0 0 var(--btx-gap-lg) 0 !important;
    border-bottom: var(--btx-border-dashed) !important;
    padding-bottom: var(--btx-gap-sm) !important;
}

/* 2c. Adresy w Szczegółach Zamówienia */
.btx-addresses-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--btx-tile-padding) !important;
}

.btx-addresses-grid .btx-address-item {
    background: var(--btx-bg-page) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--btx-radius-lg) !important;
    padding: var(--btx-tile-padding) !important;
    min-height: auto !important;
}


/* 2d. Historia Statusów - Oś Czasu (Timeline) */
.btx-history-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--btx-gap-md) !important;
    position: relative !important;
    padding-left: 20px !important;
}

.btx-history-timeline::before {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 10px !important;
    bottom: 10px !important;
    width: 2px !important;
    background: var(--btx-border-color) !important;
}

.btx-timeline-item {
    display: flex !important;
    align-items: center !important;
    gap: var(--btx-gap-lg) !important;
    position: relative !important;
}

.btx-timeline-item::before {
    content: "" !important;
    position: absolute !important;
    left: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--btx-color-primary) !important;
    border: 2px solid var(--btx-bg-tile) !important;
    box-shadow: 0 0 0 2px var(--btx-border-color) !important;
    z-index: 1 !important;
}

.btx-timeline-date {
    font-size: var(--btx-text-sm) !important;
    color: var(--btx-text-tertiary) !important;
    min-width: 140px !important;
    font-weight: 600 !important;
}

.btx-timeline-status {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.btx-timeline-status .btx-pill {
    display: inline-block !important;
    white-space: normal !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .btx-timeline-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .btx-timeline-item::before {
        top: 6px !important;
        transform: none !important;
    }
    .btx-timeline-date {
        min-width: auto !important;
    }
}

/* 2e. Przewoźnik (Dostawa) */
.btx-shipping-tile .btx-shipping-line {
    background: var(--btx-bg-page) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--btx-radius-lg) !important;
    padding: var(--btx-tile-padding) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--btx-gap-md) !important;
}

@media (min-width: 768px) {
    .btx-shipping-tile .btx-shipping-line {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

.btx-ship-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.btx-ship-info strong {
    font-size: var(--btx-text-md) !important;
    color: var(--btx-text-primary) !important;
}

.btx-ship-info span {
    font-size: var(--btx-text-sm) !important;
    color: var(--btx-text-secondary) !important;
}

.btx-ship-meta {
    display: flex !important;
    align-items: center !important;
    gap: var(--btx-gap-lg) !important;
    font-size: var(--btx-text-sm) !important;
    color: var(--btx-text-secondary) !important;
    font-weight: 600 !important;
}

/* 2f. Specjalny moduł listy kuponów / rabatów */
.btx-voucher-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--btx-gap-md) !important;
}

@media (min-width: 768px) {
    .btx-voucher-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/*    BENTO UI - FORMULARZE STREFY KLIENTA (KROK 3) */

/* Etykiety i wiersze formularzy */
.btx-tile .form-group.row,
.btx-tile .form-control-row,
.btx-tile .address-form .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
}

@media (min-width: 768px) {

    .btx-tile .form-group.row,
    .btx-tile .form-control-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--btx-gap-lg) !important;
    }

    .btx-tile .form-group.row label,
    .btx-tile .form-control-row .form-control-label {
        width: 180px !important;
        min-width: 180px !important;
        text-align: right !important;
        margin-bottom: 0 !important;
    }

    .btx-tile .form-group.row>div,
    .btx-tile .form-control-row>div,
    .btx-tile .form-group.row .col-md-6,
    .btx-tile .form-group.row .col-md-9 {
        flex: 1 !important;
        max-width: 600px !important;
        width: auto !important;
    }
}

/* Stylizacja samych pól formularzy (input, select, textarea) */
.btx-tile label,
.btx-tile .form-control-label {
    font-size: var(--btx-text-sm) !important;
    font-weight: 700 !important;
    color: var(--btx-text-secondary) !important;
    text-transform: none !important;
}

/* Reset marginesów formularzy w kafelkach, by zachować równe odstępy pod przyciskami (np. Wyślij, Poproś o zwrot, Pobierz fakturę) */
.btx-tile form {
    margin-bottom: 0 !important;
}

/* Zabicie hijackingu wtyczki bootstrap-select na kafelkach Bento */
.btx-tile .bootstrap-select select {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}
.btx-tile .bootstrap-select > .dropdown-toggle,
.btx-tile .bootstrap-select > .dropdown-menu {
    display: none !important;
}
.btx-tile .bootstrap-select {
    width: 100% !important;
    display: block !important;
}

.btx-tile input[type="text"],
.btx-tile input[type="email"],
.btx-tile input[type="password"],
.btx-tile input[type="tel"],
.btx-tile select,
.btx-tile textarea {
    width: 100% !important;
    max-width: 100% !important;
    background: var(--btx-bg-input) !important;
    border: 1px solid var(--btx-border-input) !important;
    border-radius: var(--btx-radius-pill) !important;
    height: 40px !important; /* Synch z systemowym .btx-form-control (40px desktop) */
    padding: 0 18px !important;
    font-size: 16px !important; /* Wymuszone 16px, absolutnie kluczowe do zablokowania auto-zooma w iOS Safari */
    font-weight: 500 !important;
    color: var(--btx-text-secondary) !important;
    transition: all var(--btx-transition-fast) !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Mobile: inputy konta równo z systemowym .btx-form-control (48px) */
@media (max-width: 991px) {
    .btx-tile input[type="text"],
    .btx-tile input[type="email"],
    .btx-tile input[type="password"],
    .btx-tile input[type="tel"],
    .btx-tile select,
    .btx-tile textarea {
        height: 48px !important;
    }
}

/* Niestandardowa strzałka TYLKO dla selectów */
.btx-tile select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
    padding-right: 40px !important; /* Miejsce na strzałkę */
}

/* Textarea wewnątrz kafelków - powiększony rozmiar i odpowiednie zaokrąglenie */
.btx-tile textarea {
    height: auto !important;
    min-height: 140px !important;
    padding: 16px 20px !important;
    border-radius: var(--btx-radius-xl) !important;
    resize: none !important;
}

.btx-tile input[type="text"]:focus,
.btx-tile input[type="email"]:focus,
.btx-tile input[type="password"]:focus,
.btx-tile select:focus,
.btx-tile textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--btx-neutral-400) !important;
    background: var(--btx-bg-tile) !important;
}

/* 1. Nowy UX dla pół "Hasło" (Napis POKAŻ) */
.btx-tile .input-group {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

.btx-tile .input-group>input,
.btx-tile .input-group input[type="password"] {
    width: 100% !important;
    border-radius: var(--btx-radius-lg) !important;
    padding-right: 64px !important;
    /* Miejsce na napis POKAŻ */
}

.btx-tile .input-group-btn {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    z-index: 10 !important;
}

.btx-tile .input-group-btn .btn,
.btx-tile .input-group-append .btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #9CA3AF !important;
    transition: color 0.2s !important;
    padding: 0 !important;
    text-transform: none !important;
}

.btx-tile button[data-action="show-password"]:hover {
    color: var(--btx-color-primary) !important;
}

/* Przyciski płci / radios */
.btx-tile .radio-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: var(--btx-gap-lg) !important;
    cursor: pointer !important;
    font-size: var(--btx-text-sm) !important;
    color: var(--btx-text-secondary) !important;
}

.btx-tile input[type="radio"] {
    accent-color: var(--btx-color-primary) !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

/* 2. Naprawa checkboxów (Reset flexboxa na tekście) */
.btx-tile .custom-checkbox,
.btx-tile .form-group .checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    padding: 12px 16px 12px 16px !important;
    /* Lekkie wycofanie w lewo na życzenie */
}

.btx-tile .custom-checkbox input[type="checkbox"],
.btx-tile .form-group input[type="checkbox"] {
    flex-shrink: 0 !important;
    margin: 0 !important;
    accent-color: var(--btx-color-primary) !important;
    width: 24px !important; /* Minimalnie powiększony fizyczny checkbox do 24px z 22px */
    height: 24px !important;
    cursor: pointer !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important; /* Wyrównanie do pierwszej linii tekstu, zamiast centrowania w pionie całości */
    transform: none !important;
}

.btx-tile .custom-checkbox>label,
.btx-tile .form-group .checkbox>label {
    display: block !important;
    /* Przywrócenie bloku */
    position: relative !important;
    padding-left: 40px !important; /* 24px checkbox + 16px odstępu */
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
    font-size: 13px !important; /* Zmniejszenie na 13px (z 15px) na życzenie */
    font-weight: 500 !important;
    color: var(--btx-text-secondary) !important;
    line-height: 1.6 !important;
}

.btx-tile .custom-checkbox>label p,
.btx-tile .custom-checkbox>label a,
.btx-tile .custom-checkbox>label span,
.btx-tile .custom-checkbox>label em,
.btx-tile .custom-checkbox>label small,
.btx-tile .custom-checkbox>label strong {
    font-size: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* Ukrycie custom span Presty (kółka z font-awesome/material) */
.btx-tile .custom-checkbox>label>span:first-of-type,
.btx-tile .form-group .checkbox>label>span:first-of-type {
    display: none !important;
}

/* Ukrycie zewnętrznego napisu "Opcjonalny" */
.btx-auth-tile form .form-control-comment {
    display: none !important;
}

/* -------------------------------------
   G. AKCJE I PRZYCISKI FORMULARZY (BENTO BUTTONS)
------------------------------------- */

/* Kontener akcji w formularzu - w Preście 1.7 zwykle display flex na prawą stronę */
.btx-tile .form-footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    /* margin-top wyłączone z !important, by można było sterować nim z plików .tpl */
    margin-bottom: 16px !important; /* Odsunięcie od dolnej krawędzi kafelka */
}

.btx-tile button[type="submit"],
.btx-tile .form-control-submit,
.btx-tile .btn-primary {
    background: var(--btx-color-primary) !important;
    /* Czarny przycisk jak na screenie */
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--btx-radius-pill) !important;
    padding: 0 28px !important;
    height: 48px !important; /* Wysokość równa Wyloguj (lg) */
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all var(--btx-transition-fast) !important;
    box-shadow: none !important;
}

@media (hover: hover) {

    .btx-tile button[type="submit"]:hover,
    .btx-tile .form-control-submit:hover,
    .btx-tile .btn-primary:hover {
        background: var(--btx-color-primary-hover) !important;
        transform: translateY(-1px) !important;
        color: #ffffff !important; /* Ochrona przed czarnym tekstem z domyślnego theme'u */
    }
}

.btx-tile button[type="submit"]:active,
.btx-tile .form-control-submit:active,
.btx-tile .btn-primary:active {
    transform: scale(0.98) !important;
}

/* Wylogowanie / powrót z formularzy */
.btx-tile .form-footer a.form-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--btx-text-secondary) !important;
    font-size: var(--btx-text-sm) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color var(--btx-transition-fast) !important;
}

@media (hover: hover) {
    .btx-tile .form-footer a.form-link:hover {
        color: var(--btx-color-primary) !important;
    }
}





/* 4. Stylowanie Formularzy (Bento Inputs w edycji danych) */
/* BENTO AUTH & FORMS - LOGOWANIE,
REJESTRACJA,
EDYCJA KONTA (FORCE OVERRIDE) *==============================================================================*/

/* 1. Grid i układ */
.btx-auth-tile form .form-group.row {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.btx-auth-tile form .form-control-label {
    width: 100% !important;
    text-align: left !important;
    padding: 0 0 0 16px !important;
    margin-bottom: 0 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--btx-text-secondary) !important;
    letter-spacing: 0.05em !important;
}

.btx-auth-tile form .form-group .col-md-6,
.btx-auth-tile form .form-group .col-md-8,
.btx-auth-tile form .form-group [class^="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: 1 !important;
}

.btx-form-fields-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

@media (min-width: 992px) {
    .btx-form-fields-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px 16px !important;
    }

    /* RZĄD 1: Płeć (lewa) + Nazwisko (prawa) */
    .btx-auth-tile form .btx-form-group:has(input[name="id_gender"]) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .btx-auth-tile form .btx-form-group:has(input[name="lastname"]) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    /* RZĄD 2: Imię (lewa) + Email (prawa) */
    .btx-auth-tile form .btx-form-group:has(input[name="firstname"]) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .btx-auth-tile form .btx-form-group:has(input[name="email"]) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    /* RZĄD 3: Hasło (lewa) + Nowe Hasło (prawa) */
    .btx-auth-tile form .btx-form-group:has(input[name="password"]) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .btx-auth-tile form .btx-form-group:has(input[name="new_password"]) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    /* Pozycjonowanie checkboxów zgód w lewej i prawej kolumnie */
    .btx-auth-tile form .btx-form-group:has(input[name="customer_privacy"]),
    .btx-auth-tile form .btx-form-group:has(input[name="psgdpr"]) {
        grid-column: 1 !important;
    }

    .btx-auth-tile form .btx-form-group:has(input[name="newsletter"]) {
        grid-column: 2 !important;
    }

    .btx-auth-tile form .btx-form-group:has(input[name="optin"]) {
        grid-column: 2 !important;
    }
}



/* Ukrycie zewnętrznego napisu opcjonalny */
.btx-auth-tile form .form-control-comment {
    display: none !important;
}



/* 4. Radio Buttons Pan / Pani (Bento Tiles) */
.btx-tile.btx-auth-tile form .form-group:has(input[type="radio"]) .form-control-valign,
.btx-tile.btx-auth-tile form .form-group:has(input[type="radio"]) .col-md-6,
.btx-tile.btx-auth-tile form .btx-selection-group,
.btx-tile.btx-auth-tile form .btx-form-group:has(input[type="radio"]) > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Upewniamy się, że btx-selection-group rozpycha się wewnątrz form-control-valign */
.btx-tile.btx-auth-tile form .btx-selection-group {
    flex: 1 1 100% !important;
    margin: 0 !important;
}

.btx-tile.btx-auth-tile form label:has(input[type="radio"]),
.btx-tile.btx-auth-tile form label.radio-inline,
.btx-tile.btx-auth-tile form .btx-selection-item {
    width: 100% !important;
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important; /* Synch z systemem (MD 40px) */
    background: #fdfdfd !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--btx-radius-pill) !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--btx-text-secondary, #6b7280) !important;
    cursor: pointer !important;
    transition: all var(--btx-transition-fast, 0.2s) !important;
}

/* Kategoryczne ukrycie natywnych radio */
.btx-tile.btx-auth-tile form input[type="radio"],
.btx-tile.btx-auth-tile form .custom-radio,
.btx-tile.btx-auth-tile form .custom-radio span {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Aktywny stan dla wybranego kafelka */
.btx-tile.btx-auth-tile form label:has(input[type="radio"]:checked) {
    background: var(--btx-bg-input, #f3f4f6) !important;
    border-color: #d1d5db !important;
    color: var(--btx-text-primary, #111827) !important;
    font-weight: 700 !important;
}

/* Efekt Hover dla kafelków płci (Pan/Pani) */
.radio-inline,
label.radio-inline,
.btx-tile.btx-auth-tile form label.radio-inline,
.btx-tile.btx-auth-tile form label:has(input[name="id_gender"]) {
    transition: all var(--btx-transition-fast, 0.2s) !important;
}

@media (hover: hover) {

    /* Hover dla niezaznaczonego kafelka */
    .radio-inline:hover,
    label.radio-inline:hover,
    .btx-tile.btx-auth-tile form label.radio-inline:hover,
    .btx-tile.btx-auth-tile form label:has(input[name="id_gender"]):hover {
        border-color: #a3a3a3 !important;
        background: #f9fafb !important;
        color: var(--btx-text-primary, #111827) !important;
        transform: translateY(-2px) translateZ(0) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }

    /* Hover dla zaznaczonego kafelka */
    .radio-inline:has(input[type="radio"]:checked):hover,
    label.radio-inline:has(input[type="radio"]:checked):hover,
    .btx-tile.btx-auth-tile form label.radio-inline:has(input[type="radio"]:checked):hover,
    .btx-tile.btx-auth-tile form label:has(input[name="id_gender"]:checked):hover {
        border-color: var(--btx-color-primary, #000000) !important;
        background: var(--btx-bg-input, #f3f4f6) !important;
        transform: translateY(-2px) translateZ(0) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }
}

/* 5. Checkboxy Zgód (Naprawa układu) */
.btx-auth-tile form .form-group .col-md-offset-3,
.btx-auth-tile form .form-group .col-md-9 {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.btx-tile.btx-auth-tile form .custom-checkbox,
.btx-tile.btx-auth-tile form .checkbox {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    /* Mniejszy padding pionowy */
    background: #fdfdfd !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--btx-radius-lg, 12px) !important;
    transition: all var(--btx-transition-fast, 0.2s) !important;
}

.btx-tile.btx-auth-tile form .custom-checkbox:hover,
.btx-tile.btx-auth-tile form .checkbox:hover {
    background: #fdfdfd !important;
    /* Zablokowany hover */
    border-color: var(--btx-border-color, #e5e7eb) !important;
}

.btx-tile.btx-auth-tile form .custom-checkbox>label,
.btx-tile.btx-auth-tile form .checkbox>label {
    display: block !important;
    /* Przywrócenie block/inline flow dla normalnych odstępów między wyrazami i linkami */
    position: relative !important;
    padding-left: 32px !important;
    /* Miejsce na absolutny checkbox po lewej */
    text-align: left !important;
    font-size: var(--btx-text-sm, 14px) !important;
    font-weight: 500 !important;
    color: var(--btx-text-primary, #1f2937) !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    white-space: normal !important;
    margin: 0 !important;
    width: 100% !important;
    /* Wypełnienie pełnej szerokości kontenera */
}

/* Wymuszamy, aby wszystkie elementy w label zachowywały się jak zwykły tekst, ale ukrywamy znaczniki br i em jeśli są zbędne */
.btx-tile.btx-auth-tile form .custom-checkbox>label *,
.btx-tile.btx-auth-tile form .checkbox>label * {
    display: inline !important;
    float: none !important;
    position: static !important;
    text-align: left !important;
}

/* Ukrywamy brzydkie twarde łamanie linii wstawiane przez Preste */
.btx-tile.btx-auth-tile form .custom-checkbox>label br,
.btx-tile.btx-auth-tile form .checkbox>label br {
    display: none !important;
}

/* Stylizacja długiego opisu (tag em) - układa się w jednej linii z głównym labelem */
.btx-tile.btx-auth-tile form .custom-checkbox>label em,
.btx-tile.btx-auth-tile form .checkbox>label em {
    display: inline-block !important; /* Zamiana z block na inline-block zapobiega przełamaniu */
    font-size: 11px !important;
    color: var(--btx-text-secondary, #6b7280) !important;
    font-style: normal !important;
    margin-top: 0 !important;
    margin-left: 6px !important; /* Delikatny odstęp od głównego tekstu */
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.btx-tile.btx-auth-tile form .custom-checkbox input[type="checkbox"],
.btx-tile.btx-auth-tile form .checkbox input[type="checkbox"] {
    display: block !important;
    position: absolute !important;
    /* Absolutne centrowanie w osi pionowej kafelka */
    left: 0 !important;
    top: 50% !important;
    /* Centrowanie co do piksela */
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--btx-color-primary) !important;
    opacity: 1 !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

@media (min-width: 992px) {
    .btx-tile.btx-auth-tile form .custom-checkbox,
    .btx-tile.btx-auth-tile form .checkbox {
        padding: 4px 8px !important; /* Mniejsze marginesy wewnętrzne */
        margin-bottom: 4px !important; /* Mniejsze odstępy między samymi zgodami */
    }

    .btx-tile.btx-auth-tile form .custom-checkbox input[type="checkbox"],
    .btx-tile.btx-auth-tile form .checkbox input[type="checkbox"] {
        width: 14px !important; /* Mniejszy, bardziej elegancki kwadracik */
        height: 14px !important;
    }

    .btx-tile.btx-auth-tile form .custom-checkbox>label,
    .btx-tile.btx-auth-tile form .checkbox>label {
        padding-left: 22px !important; /* Mniej wcięcia dla tekstu zgody, bo kwadracik jest mały */
    }
}


/* Ukrycie fałszywych ikon z theme'u */
.btx-tile.btx-auth-tile form .custom-checkbox>label>span:first-of-type,
.btx-tile.btx-auth-tile form .checkbox>label>span:first-of-type,
.btx-tile.btx-auth-tile form .custom-checkbox .custom-checkbox-icons {
    display: none !important;
}

/* 6. Przycisk Submit */
.btx-auth-tile form footer.form-footer {
    /* marginesy kontrolowane inline w plikach TPL, by zrównać wysokość z/bez linku Zapomniałeś hasła */
    border-top: none !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.btx-auth-tile form button[type="submit"] {
    background: var(--btx-color-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--btx-radius-pill) !important;
    padding: 0 28px !important;
    height: 48px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all var(--btx-transition-fast) !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    .btx-auth-tile form button[type="submit"]:hover {
        background: var(--btx-color-primary-hover) !important;
        color: #ffffff !important; /* Ochrona przed czarnym tekstem z domyślnego theme'u */
    }
}

/* Ukrycie etykiety dla wyboru płci, ale zachowanie jej wysokości (dla wyrównania w siatce) */
.btx-auth-tile form .btx-form-group:has(input[name="id_gender"])>label.btx-form-label {
    visibility: hidden !important;
}


/* TWARDY FIX DLA: AKTYWNYCH LINKÓW, BADGE PULPIT I WYLOGUJ Z CACHE */

/* 1. Naprawa aktywnych kolorów i hover w sidebarze dla span */
.btx-account-nav a:hover:not(.active) span {
    color: var(--btx-color-primary) !important;
}

.btx-account-nav a.active span {
    color: #ffffff !important;
}

/* Usunięto nadpisanie przycisku Wyloguj, aby korzystał ze standardowych stylów sidebara */

/* 3. Naprawa odstępu Badge Pulpit przy pozycjonowaniu absolutnym */
.btx-account-hero {
    padding-top: var(--btx-tile-padding) !important;
}




/* ==============================================================================
 * CLEANUP PHASE 2: INLINE STYLES MOVED TO CSS
 * ============================================================================== */

/* discount.tpl, order-slip.tpl, order-follow.tpl */
.btx-voucher-list,
.btx-orders-list {
    margin-top: var(--btx-gap-lg) !important;
}

.btx-voucher-list .btx-order-card {
    padding: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    border-style: solid !important;
}

.btx-voucher-info .btx-order-number {
    display: block !important;
    color: var(--btx-color-primary) !important;
}

.btx-voucher-value {
    text-align: right !important;
}

.btx-voucher-value .btx-order-price {
    display: block !important;
}

/* order-follow.tpl */
.btx-order-date.btx-mr-12 {
    margin-right: 12px !important;
}

/* my-account.tpl */
.btx-edit-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
}

/* _partials/order-messages.tpl */
.btx-message-text {
    font-size: 13px !important;
    margin-bottom: 24px !important;
    line-height: 1.5 !important;
}

.btx-btn-primary.btx-btn-auto {
    width: auto !important;
    min-width: 200px !important;
}

/* identity.tpl */
h1.btx-pill.btx-mb-lg {
    margin-bottom: 12px !important;
}

/* history.tpl */
.btx-history-col {
    gap: 12px !important;
}

.btx-history-actions {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

.btx-history-actions .btx-btn-ghost,
.btx-history-actions .btx-btn-secondary,
.btx-history-actions .btx-btn-reorder {
    padding: 0 16px !important;
}

.btx-empty-state.btx-mt-24 {
    margin-top: 24px !important;
}

.btx-btn-primary.btx-mt-8 {
    margin-top: 8px !important;
}



/* checkout/cart.tpl */
.btx-cart-icon-mr {
    margin-right: 8px !important;
    vertical-align: middle !important;
}

.btx-cart-text-valign {
    vertical-align: middle !important;
}

.btx-newsletter-label {
    margin-bottom: 12px !important;
    font-weight: 700 !important;
}
/* Węższy kontener dla formularzy logowania i rejestracji */
.btx-auth-wrapper {
    max-width: 840px !important; /* Bazowa szerokość pod formularz rejestracji */
    margin: 0 auto !important;
    width: 100% !important;
    padding: 0 16px !important;
    min-height: 75vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: var(--btx-gap-md) !important;
}

/* Wymuszenie węższego kafelka tylko dla strony logowania i odzyskiwania hasła.
   Używamy :not(:has(.register-form)), aby nie zawężać formularza rejestracji, 
   który w PrestaShop korzysta z tego samego ID (#authentication). */
#authentication .btx-auth-wrapper:not(:has(.register-form)),
#password .btx-auth-wrapper {
    max-width: 560px !important;
}

@media (max-width: 991px) {
    .btx-auth-wrapper {
        margin-bottom: 160px !important; /* Bezpiecznie wypycha stopkę bez niszczenia centrowania flexboxa */
    }
}

.btx-auth-wrapper .btx-auth-tile {
    margin-bottom: 0 !important;
}

/* Ujednolicenie odstępów (góra-dół) dla wszystkich kafelków autoryzacji */
.btx-auth-tile {
    padding: 40px 12px !important;
}

@media (min-width: 992px) {
    .btx-auth-tile {
        padding: 48px 16px !important;
    }
}

.btx-auth-switch,
.btx-auth-footer {
    text-align: center !important;
    margin-top: var(--btx-gap-md) !important;
}

/* Pigułki usunięto stąd, bo dostały globalne absolutne pozycjonowanie w sekcji wyżej */
.btx-btn-logout-full span {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}

/* checkout/cart.tpl */
.btx-cart-icon-mr {
    margin-right: 8px !important;
    vertical-align: middle !important;
}

.btx-cart-text-valign {
    vertical-align: middle !important;
}

.btx-newsletter-label {
    margin-bottom: 12px !important;
    font-weight: 700 !important;
}

/* Odstęp między nagłówkiem w kafelku (badge) a formularzem logowania/rejestracji */
.btx-auth-tile > h1 {
    margin-bottom: 48px !important;
}

/* Węższe inputy na stronach logowania i rejestracji (zachowanie szerokiego kafelka) */
@media (min-width: 768px) {
    .btx-auth-wrapper .btx-auth-tile form {
        padding: 0 48px !important;
    }
}


/* Przycisk pokazywania hasła (ikona oka) */
.btx-password-btn {
    position: absolute !important;
    right: 4px !important;
    top: 4px !important;
    bottom: 4px !important;
    height: auto !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Material Icons' !important;
    font-size: 16px !important;
    color: var(--btx-text-muted) !important;
    line-height: 1 !important;
    text-transform: none !important;
    border-radius: var(--btx-radius-pill) !important;
    z-index: 10 !important;
    transition: opacity var(--btx-transition-fast) !important;
}

/* Ukrycie oka hasła, gdy pojawia się komunikat błędu (żeby nie nachodziło na tekst "WYPEŁNIJ TO POLE") */
.js-parent-focus:has(.btx-error-pill) .btx-password-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* KOMPRESJA WYSOKOŚCI FORMULARZA REJESTRACJI 
   (Ściśnięcie elementów, by kafelek rejestracji był podobnej wielkości co logowanie) */
.btx-auth-tile.register-form > h1 {
    margin-bottom: 24px !important;
}

.btx-auth-tile.register-form .btx-form-group {
    margin-bottom: 0 !important;
}



/* ========================================================
   NOWY UKŁAD FORMULARZA (Zintegrowane checkboxy i przyciski)
   ======================================================== */

.btx-form-divider {
    border: none !important;
    border-top: 1px solid var(--btx-border-color, #e5e7eb) !important;
    margin: 32px 0 24px 0 !important;
    width: 100% !important;
}

/* Style globalne dla checkboxów zgód (Mobile + Desktop) */
.btx-form-checkboxes {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 991px) {
    .btx-form-checkboxes {
        margin-bottom: 16px !important; /* Zmniejszony margines między zgodą a buttonami */
    }
    .btx-form-checkboxes > div:nth-of-type(2) {
        margin-top: 8px !important; /* Zwiększony odstęp nad drugą zgodą, sumuje się z gap: 12px */
    }
}

.btx-form-checkboxes .btx-checkbox-wrap {
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    padding-left: 16px !important; /* Lekkie wycofanie w lewo na życzenie */
}

.btx-form-checkboxes .btx-checkbox-wrap input {
    margin-top: 3px !important; /* Drobna korekta: o 1px wyżej */
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important; /* Przywrócenie kwadratu dla rozmiaru 16px */
}

@media (min-width: 992px) {
    .btx-form-checkboxes .btx-checkbox-wrap input {
        width: 14px !important; /* Zmniejszenie na desktopie */
        height: 14px !important;
    }
}

.btx-form-checkboxes .btx-checkbox-wrap,
.btx-form-checkboxes .btx-checkbox-wrap span,
.btx-form-checkboxes .btx-checkbox-wrap span em {
    font-size: 13px !important;
    line-height: 1.6 !important;
    white-space: normal !important; /* Usunięcie pre-line, żeby wyłączyć twarde entery! */
}

.btx-form-checkboxes .btx-checkbox-wrap span i,
.btx-form-checkboxes .btx-checkbox-wrap span em {
    font-style: normal !important;
    display: inline-block !important; /* Gwarancja jednej linii */
    margin-left: 4px !important;
}

/* Ukrywamy twarde łamanie linii (<br>), które PrestaShop wstawia w zgodach */
.btx-form-checkboxes .btx-checkbox-wrap br {
    display: none !important;
}

.btx-form-checkboxes .btx-checkbox-wrap a,
.btx-form-checkboxes .btx-checkbox-wrap strong,
.btx-form-checkboxes .btx-checkbox-wrap b {
    color: var(--btx-text-primary, #111827) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: color var(--btx-transition-fast) !important;
}

.btx-form-checkboxes .btx-checkbox-wrap a:hover {
    color: var(--btx-text-muted, #6b7280) !important;
}

.btx-form-bottom-wrapper {
    margin-top: 32px !important;
}

/* Odsunięcie przycisków od zgód (Mobile-first) */
.btx-auth-tile.register-form form footer.form-footer {
    margin-top: 48px !important;
}

@media (min-width: 992px) {
    .btx-form-bottom-wrapper {
        display: flex !important;
        flex-direction: column !important; /* Zamiana row na column! Dół zajmuje całą szerokość */
        gap: 24px !important;
        margin-top: 24px !important;
    }

    .btx-form-checkboxes {
        width: 100% !important;
        margin-bottom: 0 !important;
        gap: 0 !important;
    }

    .btx-auth-tile.register-form form footer.form-footer {
        width: 100% !important;
        margin-top: 16px !important;
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Idealne centrowanie przycisków na dole */
    }
}

.btx-auth-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 16px !important;
}

@media (min-width: 992px) {
    .btx-hidden-on-desktop {
        display: none !important;
    }
}

/* ============================================================
   MOBILE DASHBOARD BENTO LIST
   ============================================================ */
.btx-bento-mobile-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #f4f4f4;
    padding-bottom: 96px;
}

/* Szare tło systemowe całego okna w trybie dashboardu */
body.page-my-account,
body.page-my-account #wrapper,
body.page-my-account #content-wrapper {
    background-color: #f4f4f4 !important;
}

.btx-bento-group {
    background: #ffffff;
    border-radius: var(--btx-radius-2xl) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--btx-glass-border, 1px solid rgba(0, 0, 0, 0.05));
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Lepszy, kafelkowy cień */
}

.btx-bento-item {
    display: flex;
    align-items: center;
    padding: 16px var(--btx-tile-padding, 16px);
    text-decoration: none !important;
    color: var(--btx-text-primary);
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    transition: transform 0.15s ease, background-color 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btx-bento-item:last-child {
    border-bottom: none;
}

a.btx-bento-item:active,
a.btx-bento-item.btx-touch-active {
    transform: scale(0.98) !important;
    background-color: transparent !important;
}

.btx-bento-icon {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.btx-color-orange {
    color: var(--btx-text-primary);
}

.btx-color-gray {
    color: var(--btx-text-secondary);
}

.btx-bento-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.btx-bento-title {
    font-size: var(--btx-text-body, 14px); /* Zmniejszono z 16px */
    font-weight: 600;
    line-height: 1.2;
    color: var(--btx-text-primary);
}

/* Szare tytuły w grupie dolnej */
.btx-bento-group-secondary .btx-bento-title {
    color: var(--btx-text-secondary);
    font-weight: 500;
}

.btx-bento-arrow {
    display: flex;
    align-items: center;
    color: var(--btx-text-tertiary, #cccccc);
    margin-left: 12px;
}

/* GRUPA PROFILOWA (Z AWATAREM) */
.btx-bento-profile-group .btx-bento-item {
    padding: 16px 20px; /* Zmniejszono padding, był 20px */
}

.btx-bento-avatar {
    width: 56px; /* Zmniejszono z 64px */
    height: 56px; /* Zmniejszono z 64px */
    border-radius: 50%;
    background-color: var(--btx-text-primary);
    color: var(--btx-bg-card, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px; /* Zmniejszono z 20px */
    margin-right: 16px; /* Zmniejszono z 20px */
    flex-shrink: 0;
}

.btx-bento-profile-group .btx-bento-title {
    font-size: var(--btx-text-h3, 22px);
    font-weight: 700;
    margin-bottom: 4px;
}

.btx-bento-profile-group .btx-bento-subtitle {
    font-size: 14px;
    color: var(--btx-text-secondary);
    line-height: 1.4;
}

/* LICZNIK ZAMÓWIEŃ (BADGE) */
.btx-bento-badge {
    background-color: var(--btx-bg-input, #f2f2f2);
    color: var(--btx-text-primary);
    font-weight: 700;
    font-size: 14px;
    min-width: 26px;
    height: 26px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    margin-left: 12px;
}

/* 5. Kafel Produktów (Lista i Zwroty) */
.btx-order-products-list {
    display: flex;
    flex-direction: column;
}

.btx-order-product-line {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-bottom: var(--btx-border-dashed) !important;
}

.btx-order-product-line:last-child {
    border-bottom: none !important;
}

.col-checkbox {
    flex: 0 0 30px !important;
}

.col-product {
    flex: 1 1 calc(100% - 42px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.col-product .btx-product-name {
    font-weight: 700 !important;
    color: var(--btx-text-primary) !important;
    font-size: var(--btx-text-sm) !important;
    line-height: 1.3 !important;
}

.col-product .btx-product-ref {
    font-size: var(--btx-text-micro) !important;
    color: var(--btx-text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.col-qty, .col-price, .col-total {
    flex: 1 1 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: var(--btx-text-sm) !important;
    padding: 4px 0 !important;
}

.btx-mobile-label {
    font-size: 11px !important;
    color: var(--btx-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
}

/* Podsumowanie cen (Receipt) */
.btx-order-totals {
    margin-top: 24px !important;
    padding: var(--btx-gap-lg) !important;
    background: var(--btx-bg-page) !important;
    border-radius: var(--btx-radius-lg) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.btx-total-line {
    display: flex !important;
    justify-content: space-between !important;
    font-size: var(--btx-text-sm) !important;
    color: var(--btx-text-secondary) !important;
}

.btx-total-line.btx-grand-total {
    margin-top: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--btx-border-light) !important;
    font-weight: 800 !important;
    color: var(--btx-text-primary) !important;
    font-size: var(--btx-text-md) !important;
}

@media (min-width: 768px) {
    .btx-products-header {
        display: grid !important;
        grid-template-columns: 40px 3fr 1fr 1fr 1fr !important;
        gap: 16px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--btx-border-color) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        font-size: 11px !important;
        color: var(--btx-text-muted) !important;
        letter-spacing: 0.05em !important;
    }
    .btx-order-product-line {
        display: grid !important;
        grid-template-columns: 40px 3fr 1fr 1fr 1fr !important;
        gap: 16px !important;
        flex-wrap: nowrap !important;
    }
    .col-checkbox,
    .col-product,
    .col-qty, .col-price, .col-total {
        flex: unset !important;
        display: block !important;
        padding: 0 !important;
    }
    .col-qty, .col-price, .col-total {
        text-align: right !important;
    }
    .btx-header-item.col-qty,
    .btx-header-item.col-price,
    .btx-header-item.col-total {
        text-align: right !important;
    }
    .btx-qty-controls {
        justify-content: flex-end !important;
    }
    .btx-mobile-label {
        display: none !important;
    }
}

/* Stylowanie mikro-selecta (gdy kupiono > 1 sztukę) */
.btx-select-mini {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--btx-bg-input) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%237a7a7a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E') no-repeat right 8px center !important;
    border: 1px solid var(--btx-border-light) !important;
    border-radius: var(--btx-radius-pill) !important;
    padding: 2px 24px 2px 10px !important;
    font-size: var(--btx-text-sm) !important;
    font-weight: 600 !important;
    color: var(--btx-text-primary) !important;
    cursor: pointer !important;
    height: 28px !important;
    min-width: 50px !important;
    text-align: center !important;
    box-shadow: var(--btx-shadow-sm) !important;
    transition: var(--btx-transition) !important;
}

.btx-select-mini:hover,
.btx-select-mini:focus {
    border-color: var(--btx-color-primary) !important;
    outline: none !important;
}

/* Wygodniejszy Touch Target dla formularzy na mobile */
@media (max-width: 991px) {
    .btx-tile input[type="text"],
    .btx-tile input[type="email"],
    .btx-tile input[type="password"],
    .btx-tile input[type="tel"],
    .btx-tile select:not(.btx-select-mini),
    .btx-tile.btx-auth-tile form label:has(input[type="radio"]),
    .btx-tile.btx-auth-tile form label.radio-inline,
    .btx-tile.btx-auth-tile form .btx-selection-item {
        height: 48px !important;
    }
}

/* Order return — heading */
.btx-return-heading {
    font-size: 18px;
    font-weight: 700;
    color: var(--btx-text-primary);
    margin: 0 0 4px;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .btx-return-heading {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .btx-account-content .btx-tile {
        padding-top: 36px !important;
    }

    /* Zwrot (mobile): czytelny stack — [checkbox] | nazwa + wiersze label–wartość */
    .btx-account-content .btx-order-product-line {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        column-gap: 12px !important;
        row-gap: 8px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .btx-account-content .btx-order-product-line .col-checkbox {
        grid-column: 1 !important;
        grid-row: 1 / -1 !important;
        align-self: start !important;
        padding-top: 2px !important;
    }

    .btx-account-content .btx-order-product-line .col-product,
    .btx-account-content .btx-order-product-line .col-qty,
    .btx-account-content .btx-order-product-line .col-price,
    .btx-account-content .btx-order-product-line .col-total {
        grid-column: 2 !important;
        text-align: left !important;
    }

    .btx-account-content .btx-order-product-line .col-qty,
    .btx-account-content .btx-order-product-line .col-price,
    .btx-account-content .btx-order-product-line .col-total {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* Etykieta do lewej, wartość do prawej */
        text-align: left !important;
        gap: 8px !important;
    }

    .btx-account-content .btx-order-product-line .btx-qty-controls {
        justify-content: flex-end !important;
        gap: 12px !important;
    }
}

/* RODO — odstęp pod badge */
.btx-gdpr-grid .btx-tile .btx-badge-corner {
    margin-bottom: 24px !important;
    display: inline-flex !important;
}

/* RODO — dwa kafelki obok siebie */
.btx-gdpr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--btx-gap-md);
    width: 100%;
}

@media (max-width: 768px) {
    .btx-gdpr-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   UJEDNOLICENIE RAMEK KAFLI KONTA
   Część kafli miała border, część go traciła przez border:none.
   Wymuszamy jeden cienki, ciemny border (1px neutral-400) na WSZYSTKICH
   kaflach w obrębie konta. Reguła na końcu pliku — wygrywa kolejnością.
   ============================================================ */
.btx-account-layout .btx-tile,
.btx-account-main .btx-tile {
    /* Dokładnie jak .btx-bento-group (kafle pulpitu = referencja) */
    border: var(--btx-glass-border, 1px solid rgba(0, 0, 0, 0.05)) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Symetryczny inset status-badge na kaflach zamówień (mobile).
   Generyczne .btx-account-content .btx-tile pompuje padding-top do 36px
   (miejsce pod nagłówkowy badge), ale kafle zamówień mają tylko status-badge
   w prawym-górnym rogu — przez to odstęp od góry był większy niż od boku.
   Przywracamy symetryczny padding (góra = bok = tile-padding). */
@media (max-width: 768px) {
    .btx-account-content .btx-tile.btx-order-tile {
        padding-top: var(--btx-tile-padding) !important;
    }
}