/* registration.css — style wydzielone z HTML w ramach porządkowania CSP — 2026-09-24. */
.custom-scrollbar::-webkit-scrollbar {
        width: 6px; /* Cienki pasek */
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #cbd5e1; /* Jasny szary */
        border-radius: 4px;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #4b5563; /* Ciemny szary */
    }
    
    /* Pasek przewijania respektuje wspólny tryb wysokiego kontrastu. */
    html.a11y-high-contrast .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #ffff00;
        border: 1px solid #ffffff;
    }
    
    /* --- EFEKTY LOADERA --- */
    @keyframes spin-slow {
        to { transform: rotate(360deg); }
    }
    @keyframes pulse-glow {
        0%, 100% { opacity: 0.6; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.05); }
    }
    @keyframes gradient-x {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    .loader-ring {
        background: conic-gradient(from 0deg, transparent 0%, #2563eb 50%, #9333ea 100%);
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 4px));
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 4px));
        border-radius: 50%;
        animation: spin-slow 1s linear infinite;
    }

    /*
     * Pola formularza mają jawne kolory dla obu motywów.
     * Chroni to jasny motyw przed odziedziczeniem ciemnego color-scheme /
     * stylu kontrolek z przeglądarki lub globalnego arkusza.
     */
    html:not(.dark) .registration-page input[type="text"],
    html:not(.dark) .registration-page input[type="email"],
    html:not(.dark) .registration-page input[type="tel"] {
        color-scheme: light;
        background-color: #ffffff !important;
        color: #111827 !important;
        border-color: #d1d5db !important;
        caret-color: #111827;
    }

    html:not(.dark) .registration-page input[type="text"]::placeholder,
    html:not(.dark) .registration-page input[type="email"]::placeholder,
    html:not(.dark) .registration-page input[type="tel"]::placeholder {
        color: #9ca3af !important;
        opacity: 1;
    }

    html:not(.dark) .registration-page input[type="text"]:focus,
    html:not(.dark) .registration-page input[type="email"]:focus,
    html:not(.dark) .registration-page input[type="tel"]:focus {
        background-color: #ffffff !important;
        border-color: #10b981 !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
        outline: none;
    }

    html:not(.dark) .registration-page input[readonly] {
        background-color: #f3f4f6 !important;
        color: #6b7280 !important;
        cursor: default;
    }

    html.dark .registration-page input[type="text"],
    html.dark .registration-page input[type="email"],
    html.dark .registration-page input[type="tel"] {
        color-scheme: dark;
    }

    html.a11y-high-contrast .registration-page input[type="text"],
    html.a11y-high-contrast .registration-page input[type="email"],
    html.a11y-high-contrast .registration-page input[type="tel"] {
        border-width: 2px !important;
    }

    /* --- Czytelny przebieg rejestracji i uploader załączników --- */
    .registration-workflow {
        border: 1px solid #bfdbfe;
        background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
        border-radius: 1.25rem;
        padding: 1.25rem;
    }
    .dark .registration-workflow {
        border-color: #334155;
        background: linear-gradient(135deg, rgba(30,58,138,.18) 0%, rgba(6,78,59,.16) 100%);
    }
    .registration-workflow-steps {
        display: grid;
        grid-template-columns: 1fr;
        gap: .9rem;
        margin-top: 1rem;
    }
    @media (min-width: 640px) {
        .registration-workflow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1280px) {
        .registration-workflow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    .registration-workflow-step {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        min-width: 0;
        min-height: 9.25rem;
        padding: 1rem;
        border-radius: 1rem;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(148, 163, 184, .28);
        box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    }
    .dark .registration-workflow-step {
        background: rgba(2, 6, 23, .34);
        border-color: rgba(100, 116, 139, .4);
        box-shadow: 0 8px 24px rgba(2, 6, 23, .26);
    }
    .registration-workflow-badge {
        position: absolute;
        top: .8rem;
        right: .8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2rem;
        height: 1.4rem;
        padding: 0 .45rem;
        border-radius: 999px;
        background: rgba(4, 120, 87, .12);
        color: #047857;
        font-size: .72rem;
        font-weight: 800;
        line-height: 1;
        border: 1px solid rgba(4, 120, 87, .14);
    }
    .dark .registration-workflow-badge {
        background: rgba(52, 211, 153, .14);
        color: #6ee7b7;
        border-color: rgba(110, 231, 183, .2);
    }
    .registration-workflow-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #047857 0%, #059669 100%);
        color: #fff;
        box-shadow: 0 12px 24px rgba(4, 120, 87, .24);
        font-size: 1.05rem;
        flex: 0 0 auto;
    }
    .registration-workflow-copy {
        min-width: 0;
    }
    .registration-workflow-step strong {
        display: block;
        color: #0f172a;
        font-size: .9rem;
        line-height: 1.25;
        letter-spacing: -.01em;
    }
    .registration-workflow-copy > span {
        display: block;
        margin-top: .3rem;
        color: #475569;
        font-size: .78rem;
        line-height: 1.45;
    }
    .dark .registration-workflow-step strong { color: #f8fafc; }
    .dark .registration-workflow-copy > span { color: #cbd5e1; }

    .registration-upload-zone {
        min-height: 180px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .75rem;
        width: 100%;
        padding: 1.1rem;
        text-align: center;
        position: relative;
    }
    .registration-upload-files {
        width: min(100%, 620px);
        display: grid;
        gap: .55rem;
        margin-top: .25rem;
    }
    .registration-upload-file {
        display: flex;
        align-items: center;
        gap: .75rem;
        width: 100%;
        padding: .65rem .75rem;
        border: 1px solid #d1fae5;
        border-radius: .85rem;
        background: #f0fdf4;
        text-align: left;
    }
    .dark .registration-upload-file {
        border-color: #065f46;
        background: rgba(6,78,59,.18);
    }
    .registration-upload-file-main { flex: 1 1 auto; min-width: 0; }
    .registration-upload-file-name {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #166534;
        font-size: .78rem;
        font-weight: 800;
    }
    .dark .registration-upload-file-name { color: #bbf7d0; }
    .registration-upload-file-meta {
        display: block;
        margin-top: .12rem;
        color: #64748b;
        font-size: .67rem;
        font-weight: 650;
    }
    .dark .registration-upload-file-meta { color: #cbd5e1; }
    .registration-upload-remove {
        flex: none;
        min-height: 34px;
        padding: .4rem .65rem;
        border: 1px solid #fecaca;
        border-radius: .65rem;
        background: #fff1f2;
        color: #b91c1c;
        font-size: .7rem;
        font-weight: 800;
        cursor: pointer;
    }
    .registration-upload-remove:hover { background: #ffe4e6; }
    .dark .registration-upload-remove {
        border-color: #7f1d1d;
        background: rgba(127,29,29,.24);
        color: #fecaca;
    }
    .registration-upload-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-height: 42px;
        padding: .65rem 1rem;
        border: 1px solid #047857;
        border-radius: .8rem;
        background: #047857;
        color: #fff;
        font-size: .78rem;
        font-weight: 850;
        cursor: pointer;
        transition: transform .15s ease, background-color .15s ease;
    }
    .registration-upload-action:hover { background: #065f46; transform: translateY(-1px); }
    .registration-upload-action:focus-visible,
    .registration-upload-remove:focus-visible {
        outline: 3px solid #2563eb;
        outline-offset: 3px;
    }

    /* Wysoki kontrast: natywny input pozostaje naprawdę ukryty, a użytkownik
       widzi wyśrodkowany przycisk i czytelną listę maksymalnie dwóch plików. */
    html.a11y-high-contrast .registration-upload-zone {
        min-height: 190px;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-color: #ffffff !important;
    }
    html.a11y-high-contrast .registration-upload-action,
    html.a11y-high-contrast .registration-upload-remove {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    html.a11y-high-contrast .registration-upload-file {
        background: #000 !important;
        border: 2px solid #fff !important;
    }
    html.a11y-high-contrast .registration-workflow-number {
        background: #ffff00 !important;
        color: #000 !important;
        border-color: #ffff00 !important;
    }

.registration-honeypot{display:none!important;opacity:0!important;visibility:hidden!important}
.registration-delay-1s{animation-delay:1s}

/* Stan początkowy; dalsze aktualizacje postępu korzystają z element.style.width. */
.registration-progress-fill { width: 0; }