/*
 * Plik: konto-uzytkownika.css
 * Opis: Style CSS dla strony "Moje konto"
 *
 * Kolory oparte o system theme.css (--theme-*).
 * Żółty (#FECB0E) i niebieski CTA (#0071e3) pozostają stałe.
 */

.account-container {
    padding: 2rem 1rem;
    font-family: 'Manrope', sans-serif;
    color: var(--theme-text);
    min-height: 100vh;
    /* Tło strony obsługiwane przez body[data-theme] w theme.css */
}

.account-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem;
    background-color: var(--theme-card-bg);
    border-radius: 0.5rem;
    box-shadow: var(--theme-shadow);
    border: 1px solid var(--theme-border);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.account-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--theme-heading);
}

/* Layout główny */
.account-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.account-section {
    margin-bottom: 3rem;
}

/* Odstęp między sekcjami w obrębie tej samej kolumny (desktop).
   :not(:first-child) — gdy sekcja nad nią zniknie (np. "Pomoc techniczna" przy
   wyłączonym systemie zgłoszeń), kolumna nie może startować 2rem niżej niż lewa. */
.account-left-column > .danger-zone-section:not(:first-child),
.account-right-column > .password-section:not(:first-child) {
    margin-top: 2rem;
}

.section-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--theme-heading);
    border-bottom: 2px solid var(--theme-border);
    padding-bottom: 0.75rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Sekcja danych użytkownika */
.user-details {
    background: var(--theme-bg-alt);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.user-details p {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    display: block;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--theme-text);
}

.user-details p strong {
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Wylogowanie w sekcji Twoje dane */
.user-data-logout {
    margin-top: 1rem;
}

/* Sekcja wylogowania */
.logout-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--theme-border);
}

.logout-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: var(--button-apple-blue);
    color: white !important;
    text-decoration: none !important;
    border-radius: var(--radius-base);
    font-weight: 600;
    transition: all 0.2s;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
}

.logout-btn:hover {
    background-color: var(--button-apple-blue-hover);
    color: white !important;
    text-decoration: none !important;
}

/* Formularz zmiany hasła */
.account-management-section {
    background: var(--theme-bg-alt);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.password-form .form-row {
    margin-bottom: 1rem;
}

.password-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.password-form input[type="password"] {
    width: 100% !important;
    padding: 0.75rem !important;
    border: 1px solid var(--theme-input-border) !important;
    border-radius: 0.375rem !important;
    font-size: 0.95rem !important;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s ease !important;
    background: var(--theme-input-bg) !important;
    color: var(--theme-input-text) !important;
    box-sizing: border-box !important;
}

.password-form input[type="password"]::placeholder {
    color: var(--theme-input-placeholder) !important;
}

.password-form input[type="password"]:focus {
    outline: none !important;
    border-color: var(--theme-link) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

.password-requirements {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    line-height: 1.3;
}

.change-password-btn {
    width: 40% !important;
    padding: 0.75rem 1rem !important;
    background-color: var(--button-apple-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-base) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
}

.change-password-btn:hover {
    background-color: var(--button-apple-blue-hover) !important;
}

.change-password-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.form-message {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-align: center;
    /* pre-line zachowuje \n z PHP (np. komunikat o wysłaniu maila + informacja o spamie) */
    white-space: pre-line;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.form-message.success {
    background: color-mix(in srgb, var(--theme-success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-success) 30%, transparent);
    color: var(--theme-success);
}

.form-message.error {
    background: color-mix(in srgb, var(--theme-error) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-error) 30%, transparent);
    color: var(--theme-error);
}

/* Formularz aktywacji urządzenia */
.activation-form .form-row {
    margin-bottom: 1rem;
}

/* Tylko labelki pól formularza (bezpośrednie dziecko .form-row) — NIE labelki zgód
   RODO (zagnieżdżone głębiej w .atfpro-rodo-consents), które mają zachować oryginalną
   wielkość liter zgodną z treścią klauzul na zapleczu. */
.activation-form .form-row > label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* input[type="password"] — onboarding dystrybutora (pages/distributor-onboarding.php)
   reużywa .activation-form dla kroku „ustaw nowe hasło". */
.activation-form input[type="text"],
.activation-form input[type="password"],
.activation-form select {
    width: 100% !important;
    padding: 0.75rem !important;
    border: 1px solid var(--theme-input-border) !important;
    border-radius: 0.375rem !important;
    font-size: 0.95rem !important;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s ease !important;
    background: var(--theme-input-bg) !important;
    color: var(--theme-input-text) !important;
    box-sizing: border-box !important;
}

.activation-form input[type="text"]::placeholder,
.activation-form input[type="password"]::placeholder,
.activation-form select::placeholder {
    color: var(--theme-input-placeholder) !important;
}

.activation-form input[type="text"]:focus,
.activation-form input[type="password"]:focus,
.activation-form select:focus {
    outline: none !important;
    border-color: var(--theme-link) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

.activation-form .atfpro-btn--primary {
    width: 40% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0.75rem 1rem !important;
    background-color: var(--button-apple-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-base) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
}

/* Wszystkie stany jawnie — sam :hover zostawia nieostylowany stan po kliknięciu. */
.activation-form .atfpro-btn--primary:hover,
.activation-form .atfpro-btn--primary:focus,
.activation-form .atfpro-btn--primary:focus-visible,
.activation-form .atfpro-btn--primary:active {
    background-color: var(--button-apple-blue-hover) !important;
    color: white !important;
}

/* ===================== AKTYWNE ZGODY RODO (/my-account/) =====================
 * Lista aktualnie udzielonych zgód opcjonalnych z możliwością wycofania.
 * Same checkboxy stylowane są przez komponent rodo.css (.atfpro-rodo-consent*).
 */

.rodo-consents-section {
    margin-top: 2.5rem;
}

.rodo-consents-desc,
.rodo-consents-empty {
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.rodo-consents-form {
    background: var(--theme-bg-alt);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.rodo-consent-date {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

/* Ten sam wyglad dla <button> w formularzu zgod i dla <a> "Zarzadzaj zgodami (RODO)"
   na /my-account/ — link prowadzi na /gdpr/ i ma byc wizualnie przyciskiem. */
.rodo-consents-form .atfpro-btn--primary,
.rodo-consents-section a.atfpro-btn--primary {
    display: inline-block;
    text-decoration: none;
    margin-top: 1.25rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--button-apple-blue);
    color: white;
    border: none;
    border-radius: var(--radius-base);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

/* Wszystkie stany jawnie — sam :hover zostawia nieostylowany stan po kliknieciu. */
.rodo-consents-form .atfpro-btn--primary:hover,
.rodo-consents-form .atfpro-btn--primary:focus,
.rodo-consents-form .atfpro-btn--primary:focus-visible,
.rodo-consents-form .atfpro-btn--primary:active,
.rodo-consents-section a.atfpro-btn--primary:hover,
.rodo-consents-section a.atfpro-btn--primary:focus,
.rodo-consents-section a.atfpro-btn--primary:focus-visible,
.rodo-consents-section a.atfpro-btn--primary:active {
    background-color: var(--button-apple-blue-hover);
    color: white;
    text-decoration: none;
}

/* ===================== SEKCJA MASZYN (kafelki) =====================
 * Prezentacja maszyn jako grid kafelków. Klasy .activate-machine* są
 * współdzielone ze stroną /activate (pages/page-aktywacja-urzadzenia.php) —
 * obie strony ładują ten plik, więc to jest jedyne źródło tych stylów.
 */

.activate-machines-section {
    margin-top: 2.5rem;
}

.activate-machines-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--theme-heading);
    border-bottom: 2px solid var(--theme-border);
    padding-bottom: 0.75rem;
    margin: 0 0 1.5rem;
}

.activate-machines-empty {
    background: var(--theme-bg-alt);
    border: 1px dashed var(--theme-border);
    border-radius: 0.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--theme-text-muted);
    font-size: 0.95rem;
}

.activate-machines-empty p {
    margin: 0;
}

.activate-machines-empty p + p {
    margin-top: 0.75rem;
}

/* Link "Przejdź do aktywacji urządzenia" — wszystkie stany jawnie. */
.activate-machines-empty a,
.activate-machines-empty a:hover,
.activate-machines-empty a:focus,
.activate-machines-empty a:active,
.activate-machines-empty a:focus-visible {
    color: var(--theme-link);
    text-decoration: underline;
}

.activate-machines-empty a:hover,
.activate-machines-empty a:focus,
.activate-machines-empty a:focus-visible {
    color: var(--theme-link-hover);
}

/* ----- Grid kafelków ----- */

.activate-machines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.activate-machine-tile {
    background: var(--theme-bg-alt);
    border: 1px solid var(--theme-border);
    border-radius: 0.625rem;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.3s ease;
}

.activate-machine-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow);
    border-color: var(--theme-text-muted);
}

.activate-machine-tile__header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--theme-border);
}

.activate-machine-tile__version {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-heading);
    margin: 0;
    line-height: 1.3;
}

.activate-machine-tile__details {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activate-machine-tile__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.activate-machine-tile__row dt {
    color: var(--theme-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.activate-machine-tile__row dd {
    margin: 0;
    color: var(--theme-text);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.activate-machine-tile__serial,
.activate-machine-tile__pin {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.92rem;
    letter-spacing: 0.5px;
}

.activate-machine-tile__distributor {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--theme-border);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.activate-machine-tile__distributor-label {
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.72rem;
    font-weight: 500;
    margin-bottom: 0.15rem;
}

.activate-machine-tile__distributor-name {
    color: var(--theme-text);
    font-weight: 600;
}

.activate-machine-tile__distributor-location {
    color: var(--theme-text-muted);
}

/* Dodatkowe linie kontaktowe w stopce kafelka (adres, e-mail, telefon, WWW).
   Używane na stronie "Moje konto", gdzie pokazujemy pełne dane kontaktowe
   dystrybutora/użytkownika — /activate korzysta tylko z label/name/location. */
.activate-machine-tile__distributor-line {
    color: var(--theme-text-muted);
    word-break: break-word;
}

.activate-machine-tile__distributor-line a {
    color: inherit;
    text-decoration: underline;
}

/* ===========================================================
   Contact card - kompaktowa karta danych kontaktowych usera
   (dystrybutor/user-maszyny) renderowana przez
   atfpro_render_contact_card() w stopkach kafelkow maszyn.
   Wzor: bardziej zwarta wersja .distributor-card z /find-distributor/.
   =========================================================== */
.atfpro-contact-card {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--theme-border);
}

.atfpro-contact-card__label {
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.72rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

/* Badge „Konto usunięte" — dane z zamrożonego snapshotu gwarancyjnego. */
.atfpro-contact-card__badge {
    display: inline-block;
    margin-bottom: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--theme-error);
    background: color-mix(in srgb, var(--theme-error) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-error) 30%, transparent);
}

.atfpro-contact-card__name {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text);
    line-height: 1.35;
}

.atfpro-contact-card__details {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.atfpro-contact-card__row {
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: 0.55rem;
    align-items: start;
    font-size: 0.82rem;
    line-height: 1.4;
}

.atfpro-contact-card__icon {
    width: 1rem;
    height: 1rem;
    color: var(--theme-text-muted);
    margin-top: 0.18rem;
    flex-shrink: 0;
}

.atfpro-contact-card__value {
    color: var(--theme-text);
    word-break: break-word;
}

.atfpro-contact-card__link {
    color: var(--theme-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

.atfpro-contact-card__link:hover,
.atfpro-contact-card__link:focus {
    color: var(--theme-link-hover);
    text-decoration: underline;
}

/* Akcje (button "Utworz zgloszenie") - pod stopka kafelka */
.activate-machine-tile__actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--theme-border);
}

.activate-machine-tile__service-request-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.55rem 1rem;
    background: var(--button-apple-blue, #0071e3);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.activate-machine-tile__service-request-btn:hover,
.activate-machine-tile__service-request-btn:focus {
    background: var(--button-apple-blue-hover, #0062c4);
    color: #fff;
    text-decoration: none;
}

/* Styles dla dystrybutora */
.distributor-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.375rem;
    font-weight: 600;
}

.section-icon {
    font-size: 1.25rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--theme-text-muted);
    color: white;
}

.machines-summary {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    border: 1px solid var(--theme-border);
    background: var(--theme-bg-alt);
    color: var(--theme-text);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.summary-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

/* Responsywność */
@media (max-width: 1024px) {
    .account-main-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Spłaszczamy CAŁY kontener konta do jednej osi (flex column) i ustalamy kolejność,
       tak by „Usuń konto" było całkiem na końcu — pod listą urządzeń. display:contents na
       gridzie i kolumnach wyciąga sekcje na poziom .account-wrapper, gdzie order działa.
       Odstępy jednolite przez flex gap. */
    .account-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .account-main-grid,
    .account-left-column,
    .account-right-column {
        display: contents;
    }

    .account-title       { order: 0; }
    .atfpro-alert        { order: 1; }
    .user-data-section   { order: 2; }
    .support-section     { order: 3; }
    .password-section    { order: 4; }
    .account-section     { order: 5; } /* Twoje urządzenia / widok dystrybutora */
    .danger-zone-section { order: 6; } /* całkiem na końcu */

    /* Odstępy daje flex gap — zerujemy własne marginesy sekcji (w tym desktopowe
       margin-top kolumn), by nie dublować odstępów. */
    .account-title,
    .account-section,
    .password-section,
    .danger-zone-section,
    .account-left-column > .danger-zone-section:not(:first-child),
    .account-right-column > .password-section:not(:first-child) {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .account-container {
        padding: 1rem 0.5rem;
    }

    .account-wrapper {
        padding: 1.5rem;
        margin: 0;
        border-radius: 0.5rem;
    }

    .account-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .distributor-section-title {
        font-size: 1.25rem;
        gap: 0.5rem;
    }

    .section-icon {
        font-size: 1rem;
        width: 28px;
        height: 28px;
    }

    .user-details {
        padding: 1rem;
    }

    /* Kafelki maszyn — jedna kolumna na wąskich ekranach. */
    .activate-machines-grid {
        grid-template-columns: 1fr;
    }

    .machines-summary {
        padding: 1rem;
    }

    .summary-text {
        font-size: 0.9rem;
    }

    .account-management-section {
        padding: 1rem;
    }
}

/* Style walidacji pól formularza */
.password-form input.error-field {
    border-color: var(--theme-error) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

.password-form input.valid-field {
    border-color: var(--theme-success) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}

/* ============================================================
   Strefa niebezpieczna — usuwanie konta (tylko rola user)
   ============================================================ */
.section-title--danger {
    color: var(--theme-error) !important;
}

.danger-zone-section .account-management-section {
    border: 1px solid color-mix(in srgb, var(--theme-error) 35%, transparent);
    border-radius: var(--radius-base);
    padding: 1.25rem;
    background: color-mix(in srgb, var(--theme-error) 6%, transparent);
}

.danger-zone-desc {
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1.75rem;
}

/* Odstępy pionowe między elementami formularza — spójne z resztą strony. */
.delete-account-form .form-row {
    margin-bottom: 1.5rem;
}

.delete-account-form .form-row:last-child {
    margin-bottom: 0;
    margin-top: 2rem; /* wyraźny odstęp przed przyciskiem „Usuń moje konto" */
}

.delete-account-form label[for="delete_confirm_password"] {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.delete-account-form input[type="password"] {
    width: 100% !important;
    padding: 0.75rem !important;
    border: 1px solid var(--theme-input-border) !important;
    border-radius: 0.375rem !important;
    font-size: 0.95rem !important;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s ease !important;
    background: var(--theme-input-bg) !important;
    color: var(--theme-input-text) !important;
    box-sizing: border-box !important;
}

.delete-account-form input[type="password"]:focus {
    outline: none !important;
    border-color: var(--theme-error) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-error) 30%, transparent) !important;
}

.delete-account-confirm label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--theme-text-secondary);
    cursor: pointer;
}

.delete-account-confirm input[type="checkbox"] {
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--theme-error);
}

/* Czerwony przycisk — wszystkie stany jawnie. */
.delete-account-btn {
    width: 40% !important;
    padding: 0.75rem 1rem !important;
    background-color: var(--theme-error) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-base) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
}

.delete-account-btn:hover,
.delete-account-btn:focus,
.delete-account-btn:active,
.delete-account-btn:focus-visible {
    background-color: color-mix(in srgb, var(--theme-error) 82%, #000) !important;
    color: #fff !important;
    outline: none !important;
}

.delete-account-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ============================================================
   Edycja danych profilu (rola 'user') — sekcja "Twoje dane".
   Przelaczanie read-only/formularz robi natywny <details>, wiec
   nie ma tu zadnego JS-a. Pola formularza korzystaja z .form-row
   i .login-button z forms.css / logowanie.css.
   ============================================================ */

.user-data-edit {
    margin-top: 18px;
    border-top: 1px solid var(--theme-border, #dee2e6);
    padding-top: 14px;
}

.user-data-edit__summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--theme-link, #2563eb);
    user-select: none;
}

.user-data-edit__summary:hover,
.user-data-edit__summary:focus,
.user-data-edit__summary:focus-visible,
.user-data-edit__summary:active {
    color: var(--theme-link-hover, #1d4ed8);
}

.user-data-edit__form {
    margin-top: 16px;
}

.user-data-edit__note {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--theme-text-secondary, #6c757d);
}

/* Znak "?" przy adresie e-mail — pelna tresc w title/aria-label. */
.user-data-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    border: 1px solid var(--theme-text-secondary, #6c757d);
    color: var(--theme-text-secondary, #6c757d);
    font-size: 11px;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
}

.user-data-hint:hover,
.user-data-hint:focus,
.user-data-hint:focus-visible,
.user-data-hint:active {
    border-color: var(--theme-link, #2563eb);
    color: var(--theme-link, #2563eb);
}

.account-section-note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--theme-text-secondary, #6c757d);
}

/* ============================================================
   Strona /marketing-contacts/ — listy kontaktow z aktualna zgoda
   marketingowa (Ravenol DE + serwis). Reuzywa layoutu konta
   (.account-container/.account-wrapper/.account-title) i przycisku
   .atfpro-btn--primary, ponizej tylko tabela i naglowki grup.
   ============================================================ */

.marketing-contacts__intro {
    margin: 0 0 10px;
    max-width: 75ch;
    line-height: 1.6;
    color: var(--theme-text);
}

.marketing-contacts__intro--muted {
    margin-bottom: 28px;
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
}

.marketing-contacts__group {
    margin-bottom: 2.5rem;
}

.marketing-contacts__group-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}

.marketing-contacts__group-header .section-title {
    margin: 0;
}

.marketing-contacts__count {
    margin-left: 6px;
    font-weight: 400;
    color: var(--theme-text-secondary);
}

/* Przycisk pobierania — ten sam wyglad co pozostale .atfpro-btn--primary,
   wszystkie stany jawnie. */
.marketing-contacts__download {
    display: inline-block;
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    background-color: var(--button-apple-blue);
    color: white;
    border: none;
    border-radius: var(--radius-base);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketing-contacts__download:hover,
.marketing-contacts__download:focus,
.marketing-contacts__download:focus-visible,
.marketing-contacts__download:active {
    background-color: var(--button-apple-blue-hover);
    color: white;
    text-decoration: none;
}

/* Tabela przewija sie poziomo na waskich ekranach zamiast rozpychac strone. */
.marketing-contacts__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--theme-border);
    border-radius: 0.5rem;
}

.marketing-contacts__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.marketing-contacts__table th,
.marketing-contacts__table td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
    white-space: nowrap;
}

.marketing-contacts__table th {
    background: var(--theme-bg-alt);
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.marketing-contacts__table tbody tr:last-child td {
    border-bottom: none;
}

.marketing-contacts__table a {
    color: var(--theme-link);
}

.marketing-contacts__table a:hover,
.marketing-contacts__table a:focus,
.marketing-contacts__table a:focus-visible,
.marketing-contacts__table a:active {
    color: var(--theme-link-hover);
}

.marketing-contacts__empty,
.marketing-contacts__note {
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.marketing-contacts__note {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--theme-border);
}

.marketing-contacts__back {
    margin-top: 1.5rem;
}

.marketing-contacts__back a {
    color: var(--theme-link);
}

.marketing-contacts__back a:hover,
.marketing-contacts__back a:focus,
.marketing-contacts__back a:focus-visible,
.marketing-contacts__back a:active {
    color: var(--theme-link-hover);
}