/* style.css */

/* --- ROOT & VARIABLES --- */
:root {
--bg-main: #050505;
--bg-card: rgba(255,255,255, 0.03);
--border-glass: rgba(255,255,255, 0.08);
--text-main: #ffffff;
--text-muted: #d1d5db;
--brand-primary: #8b5cf6;
--brand-secondary: #ec4899;
--grad-primary: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
--grad-glow: linear-gradient(45deg, #8b5cf6, #06b6d4);
--font-main: 'Outfit', sans-serif;
}
body { background-color: var(--bg-main); color: var(--text-main); font-family: var(--font-main); overflow-x: hidden; position: relative; scroll-behavior: smooth; }

/* === CURSOR: POINTER ONLY FOR CLICKABLE ELEMENTS === */
/* Links and buttons */
a, button, .btn, [role="button"] {
cursor: pointer !important;
}

/* Elements with onclick handlers - ONLY if actually clickable */
[onclick] {
cursor: pointer !important;
}

/* Bootstrap interactive elements */
[data-bs-toggle], [data-bs-target], [data-bs-dismiss],
.nav-link, .dropdown-item, .dropdown-toggle,
.btn-close, .nav-tabs .nav-link, .nav-pills .nav-link,
.accordion-button, .carousel-indicators button, .pagination .page-link,
.navbar-brand, .navbar-toggler {
cursor: pointer !important;
}

/* Form checkboxes and radio buttons (clickable) */
.form-check-input, input[type="checkbox"], input[type="radio"] {
cursor: pointer !important;
}

/* Custom interactive chips (clickable) */
.category-chip, .cat-filter-chip {
cursor: pointer !important;
}

/* Interactive images */
.proof-image, .screenshot-thumbnail {
cursor: pointer !important;
}

/* Cards and interactive panels - ONLY if clickable */
.campaign-card, .payment-history-item, .list-group-item-action {
cursor: pointer !important;
}

/* Modal buttons and close buttons */
.modal-footer button, .modal-header {
cursor: pointer !important;
}

/* NO pointer cursor for hover-only elements */
/* glass-card-3d has cursor pointer for zoom effect */

/* Zoom effect for step numbers in "How it works" section - same as other circles */
#how-it-works .glass-card {
cursor: default !important;
}
#how-it-works .glass-card:hover {
transform: none !important;
}
.step-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--grad-primary);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px auto;
font-size: 2rem;
font-weight: bold;
color: white;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: default;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
.step-icon:hover {
transform: scale(1.15);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}
.bg-gradient-orbs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; pointer-events: none; }

/* Page load transition - only content has fade-in, background is instant */
.bg-gradient-orbs,
.grid-overlay {
    opacity: 1 !important;
}

#landing-page,
#dashboard-page,
#admin-page,
#legal-page,
#regulamin-page,
#polityka-page,
#main-footer {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* Pokaż aktywne strony */
#landing-page.active,
#dashboard-page.active,
#admin-page.active,
#legal-page.active,
#regulamin-page.active,
#polityka-page.active,
#main-footer.active {
    opacity: 1;
}

#admin-page.active {
    display: block !important;
    vertical-align: top;
}

/* Admin tabs - hide inactive panes */
.tab-content > .tab-pane {
    display: none !important;
}

.tab-content > .tab-pane.active {
    display: block !important;
}

.tab-content > .tab-pane.show {
    display: block !important;
}

/* Ukryj nieaktywne strony */
#landing-page:not(.active),
#dashboard-page:not(.active),
#admin-page:not(.active),
#legal-page:not(.active),
#regulamin-page:not(.active),
#polityka-page:not(.active) {
    display: none;
}
.bg-gradient-orbs::before, .bg-gradient-orbs::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); animation: float 20s infinite alternate; }
.bg-gradient-orbs::before { width: 50vw; height: 50vw; background: rgba(139, 92, 246, 0.15); top: -10%; left: -10%; }
.bg-gradient-orbs::after { width: 40vw; height: 40vw; background: rgba(236, 72, 153, 0.15); bottom: -10%; right: -10%; animation-delay: -5s; }
@keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(50px, 50px) rotate(20deg); } }
.grid-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 50px 50px; z-index: -1; pointer-events: none; }


.text-white-75 { color: rgba(255,255,255, 0.75) !important; }
.text-gradient { background: var(--grad-primary); -webkit-background-clip: text; color: transparent; background-clip: text; }
.ls-1 { letter-spacing: 0.1em; }
.text-purple { color: var(--brand-primary) !important; }
.text-accent { color: var(--brand-secondary) !important; }
.text-primary-glow { color: var(--brand-primary) !important; text-shadow: 0 0 15px rgba(139, 92, 246, 0.4); }
.text-pink-glow { color: #ec4899; text-shadow: 0 0 20px rgba(236, 72, 153, 0.5); }
.text-purple-glow { color: #8b5cf6; text-shadow: 0 0 20px rgba(139, 92, 246, 0.5); }
.glass-card { background: var(--bg-card); backdrop-filter: blur(12px); border: 1px solid var(--border-glass); border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.glass-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.2); }
.glass-navbar { background: rgba(5, 5, 5, 0.95) !important; backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); z-index: 1040 !important; transition: all 0.3s ease; padding-top: 15px; padding-bottom: 15px; }
.glass-navbar .navbar-brand, .glass-navbar .nav-link { color: #ffffff !important; font-weight: 500; }
.glass-navbar .nav-link:hover { color: var(--brand-primary) !important; }
.btn-glow-primary { background: var(--grad-primary); border: none; color: white; font-weight: 600; padding: 12px 28px; border-radius: 12px; transition: all 0.3s ease; }
.btn-glow-primary:hover { box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); transform: translateY(-2px); color: white; }

.btn-glow-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
    border: none;
    color: white;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-glow-purple:hover {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.7);
    transform: translateY(-3px) scale(1.02);
    color: white;
}
.btn-glow-purple:active {
    transform: translateY(-1px) scale(0.98);
}

.btn-glow-outline { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 12px; transition: 0.3s; }
.btn-glow-outline:hover { background: rgba(255,255,255,0.1); border-color: white; color: white; }
.scene-container { position: relative; height: 500px; perspective: 1000px; }
.glass-card-3d { position: absolute; background: rgba(20, 20, 25, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 20px; width: 200px; height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 15px 35px rgba(0,0,0,0.3); transition: transform 0.3s ease-out; transform: translate(0, 0) rotateY(0deg) rotateX(0deg); cursor: default; }
.glass-card-3d .card-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; margin-bottom: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: default; }
.glass-card-3d .card-icon:hover { transform: scale(1.15); box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4); }
.card-1 { top: -5%; right: 5%; z-index: 1; }
.card-2 { top: 35%; right: 20%; z-index: 3; }
.card-3 { bottom: 0%; right: 8%; z-index: 2; }
.card-4 { top: -8%; right: 60%; z-index: 1; }
.card-5 { bottom: 5%; right: 55%; z-index: 2; }
.card-6 { top: 60%; right: -35%; z-index: 1; }
.card-7 { top: 25%; right: -30%; z-index: 2; }
.card-8 { top: 90%; right: -40%; z-index: 2; }
.card-9 { top: 35%; right: 70%; z-index: 1; }
.card-10 { top: -5%; right: -40%; z-index: 2; }
.bg-dark-blur { background: rgba(255,255,255,0.02); }
.stat-highlight { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.stat-disclaimer { font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-top: 5px; }
section { padding-top: 80px; padding-bottom: 40px; }
.category-filter-container { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 25px; padding: 5px; }
.cat-filter-chip { padding: 6px 16px; border-radius: 50px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: all 0.2s ease; font-size: 0.85rem; font-weight: 500; user-select: none; }
.cat-filter-chip:hover { background: rgba(255, 255, 255, 0.1); }
.cat-filter-chip.active { background: var(--grad-primary); border-color: transparent; transform: scale(1.05); box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); }
.category-chip-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.category-chip { padding: 10px 20px; border-radius: 50px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: all 0.2s ease; font-size: 0.9rem; font-weight: 500; user-select: none; }
.category-chip:hover { background: rgba(255, 255, 255, 0.1); }
.category-chip.selected { background: var(--grad-primary); border-color: transparent; transform: scale(1.05); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); }
.glass-input { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); color: white; padding: 12px; border-radius: 8px; }
.glass-input:focus { background: rgba(255, 255, 255, 0.1); border-color: var(--brand-primary); color: white; box-shadow: 0 0 10px rgba(139, 92, 246, 0.2); }
.form-control::placeholder { color: rgba(255,255,255,0.3); }
.glass-modal { background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(20px); border: 1px solid var(--border-glass); color: white; }
.nav-pills .nav-link { color: var(--text-muted); border-radius: 8px; margin-bottom: 5px; }
.nav-pills .nav-link.active { background: rgba(255,255,255,0.1); color: white; font-weight: 600; }
.list-group-item { background: transparent; border-color: var(--border-glass); color: white; }
.list-group-item:hover { background: rgba(255,255,255,0.05); }
.table { --bs-table-bg: transparent; color: white; }
.table thead th { border-bottom-color: rgba(255,255,255,0.2); }
.table tbody tr { border-bottom-color: rgba(255,255,255,0.1); }
.table-hover tbody tr:hover { background-color: rgba(255,255,255,0.05); }
#legal-content h1 { font-size: 2.5rem; margin-bottom: 1.5rem; color: white; }
#legal-content h2 { font-size: 1.8rem; margin-top: 2rem; margin-bottom: 1rem; color: var(--brand-primary); }
#legal-content p { line-height: 1.8; margin-bottom: 1rem; font-size: 1.1rem; }
#legal-content ul { list-style: disc; padding-left: 2rem; margin-bottom: 1rem; }
#legal-content li { margin-bottom: 0.5rem; }
.influencer-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 20px; margin-bottom: 20px; transition: all 0.3s ease; height: 100%; }
.influencer-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.2); }
.influencer-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-primary); }
.influencer-name { font-size: 1.2rem; font-weight: 600; color: white; margin-bottom: 5px; }
.influencer-categories { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.influencer-category-badge { padding: 4px 10px; border-radius: 50px; background: rgba(139, 92, 246, 0.2); color: var(--brand-primary); font-size: 0.75rem; font-weight: 500; }
.influencer-stats { display: flex; justify-content: space-between; margin-top: 15px; }
.influencer-stat { text-align: center; }
.influencer-stat-value { font-size: 1.2rem; font-weight: 700; color: white; }
.influencer-stat-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; transform: translateY(30px); }
@keyframes fadeInUp { to { opacity:1; transform:translateY(0); } }
.loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: var(--brand-primary); animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dashboard-header { background: var(--grad-primary); border-radius: 16px; padding: 2rem; color: white; margin-bottom: 2rem; }
.dashboard-header h1 { font-size: 2.5rem; font-weight: 700; }
.dashboard-header p { font-size: 1.1rem; opacity: 0.9; }
.dashboard-header .balance-amount { font-size: 3rem; font-weight: 800; }
.campaign-card { border-left: 4px solid var(--brand-primary); transition: all 0.3s ease; }
.campaign-card:hover { border-left-color: var(--brand-secondary); transform: translateY(-5px); }
.campaign-card .campaign-title { font-size: 1.25rem; font-weight: 600; color: white; }
.campaign-card .campaign-compensation { font-size: 1.5rem; font-weight: 700; color: var(--brand-secondary); }
.activity-timeline .timeline-item { border-left: 2px solid var(--border-glass); padding-left: 1.5rem; margin-bottom: 1.5rem; position: relative; }
.activity-timeline .timeline-item::before { content: ''; position: absolute; left: -8px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-primary); border: 2px solid var(--bg-main); }
.activity-timeline .timeline-item p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.activity-timeline .timeline-item strong { color: white; display: block; margin-bottom: 0.25rem; }
.verification-banner { background: linear-gradient(90deg, rgba(255,193,7,0.2) 0%, rgba(255,152,0,0.2) 100%); border-left: 4px solid #ffc107; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
.verification-banner h5 { color: #ffc107; font-weight: 600; margin-bottom: 10px; }
.verification-banner p { color: rgba(255,255,255,0.8); margin-bottom: 0; }
.verification-required { opacity: 0.7; position: relative; }
.verification-required::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); border-radius: 16px; z-index: 1; }
.verification-required .verification-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; width: 80%; }
.verification-required .verification-overlay i { font-size: 3rem; color: #ffc107; margin-bottom: 15px; }
.verification-required .verification-overlay h5 { color: white; font-weight: 600; margin-bottom: 10px; }
.verification-required .verification-overlay p { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.proof-image { max-width: 100%; max-height: 70vh; border-radius: 8px; cursor: pointer; transition: transform 0.3s ease; }
.proof-image:hover { transform: scale(1.02); }
.admin-tabs .nav-link { color: var(--text-muted); border: 1px solid var(--border-glass); border-radius: 8px 8px 0 0; margin-right: 5px; }
.admin-tabs .nav-link.active { background: var(--bg-card); color: white; border-bottom-color: transparent; }
.submission-card { border-left: 4px solid var(--brand-secondary); transition: all 0.3s ease; }
.submission-card:hover { transform: translateY(-3px); }
.status-badge { font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; }
.status-waiting { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.status-approved { background: rgba(40, 167, 69, 0.2); color: #28a745; }
.status-rejected { background: rgba(220, 53, 69, 0.2); color: #dc3545; }
.screenshot-thumbnail { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; transition: transform 0.2s; border: 1px solid var(--border-glass); }
.screenshot-thumbnail:hover { transform: scale(1.1); }
.skeleton-loader { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 8px; }
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.dashboard-container { min-height: calc(100vh - 80px); padding-top: 100px; padding-bottom: 80px; }
.admin-container {
    height: auto;
    padding-top: 20px;
    padding-bottom: 40px;
    display: block;
}
.user-detail-row { border-bottom: 1px solid var(--border-glass); padding: 0.5rem 0; }
.user-detail-label { font-weight: 600; color: var(--brand-primary); }
.user-detail-value { color: var(--text-main); }

/* NOWE STYL DLA PANELU ADMINA - DETALE UŻYTKOWNIKA */
.pending-user-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.pending-user-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border-color: rgba(255,255,255,0.2);
}
.pending-user-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pending-user-info h5 {
color: white;
font-weight: 600;
margin-bottom: 5px;
}
.pending-user-info p {
color: rgba(255,255,255,0.7);
margin-bottom: 3px;
font-size: 0.9rem;
}
.pending-user-actions {
display: flex;
gap: 8px;
}
.pending-user-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.stat-box {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
padding: 12px;
text-align: center;
}
.stat-box .stat-value {
font-size: 1.2rem;
font-weight: 700;
color: var(--brand-primary);
display: block;
}
.stat-box .stat-label {
font-size: 0.75rem;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
margin-top: 3px;
}
.pending-user-screenshots {
margin-top: 20px;
}
.pending-user-screenshots h6 {
color: white;
margin-bottom: 10px;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.screenshots-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
margin-bottom: 15px;
}
.screenshot-item {
position: relative;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s;
}
.screenshot-item:hover {
transform: scale(1.05);
}
.screenshot-item img {
width: 100%;
height: 120px;
object-fit: cover;
border: 1px solid rgba(255,255,255,0.1);
}
.screenshot-item .platform-label {
position: absolute;
top: 5px;
left: 5px;
background: rgba(0,0,0,0.7);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.7rem;
}
.form-text {
color: rgba(255,255,255,0.5) !important;
font-size: 0.8rem;
margin-top: 5px;
}

/* Styl dla nowego footera */
.footer-container {
background: rgba(5, 5, 5, 0.8);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 60px 0 20px;
margin-top: 80px;
}
.footer-logo {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 15px;
}
.footer-social a {
color: rgba(255, 255, 255, 0.7);
font-size: 1.2rem;
margin-right: 15px;
transition: color 0.3s;
}
.footer-social a:hover {
color: var(--brand-primary);
}
.footer-links h5 {
color: white;
font-weight: 600;
margin-bottom: 20px;
font-size: 1.1rem;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: var(--brand-primary);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
margin-top: 40px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
}

/* Dodatkowe style dla animowanych kart */
.scene-container {
margin-top: 40px;
margin-bottom: 40px;
}
.glass-card-3d .card-icon {
background: var(--grad-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.bg-gradient-primary {
background: var(--grad-primary);
}
.bg-gradient-secondary {
background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
}
.bg-gradient-tertiary {
background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}
.bg-gradient-quaternary {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.bg-gradient-quinary {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.bg-gradient-senary {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* NOWE STYLE DLA DODATKOWYCH SEKCJI */
.feature-highlight {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.3s ease;
}
.feature-highlight:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border-color: rgba(255,255,255,0.2);
}
.feature-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--grad-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 1.8rem;
color: white;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: default;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
.feature-icon:hover {
transform: scale(1.15);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}
.feature-title {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 15px;
}
.feature-description {
color: var(--text-muted);
font-size: 1.1rem;
line-height: 1.6;
}
.feature-highlight {
transition: transform 0.3s ease;
}
.feature-highlight:hover {
transform: scale(1.03);
}

.comparison-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 15px;
}
.comparison-table th {
color: white;
font-weight: 600;
text-align: left;
padding: 15px;
background: rgba(255,255,255,0.05);
border-radius: 8px;
}
.comparison-table td {
padding: 15px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
color: var(--text-muted);
}
.comparison-table tr:hover td {
background: rgba(255,255,255,0.08);
}
.comparison-table .check-icon {
color: #28a745;
font-size: 1.2rem;
}
.comparison-table .x-icon {
color: #dc3545;
font-size: 1.2rem;
}
.comparison-table .highlight-col {
background: rgba(139, 92, 246, 0.1) !important;
border: 1px solid rgba(139, 92, 246, 0.3);
}

.process-step {
text-align: center;
padding: 20px;
position: relative;
}
.process-step::after {
content: '';
position: absolute;
top: 50px;
right: -15px;
width: 30px;
height: 2px;
background: var(--border-glass);
}
.process-step:last-child::after {
display: none;
}
.process-number {
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--grad-primary);
color: white;
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: default;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
.process-number:hover {
transform: scale(1.15);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}
.process-title {
font-size: 1.2rem;
font-weight: 600;
color: white;
margin-bottom: 10px;
}
.process-description {
color: var(--text-muted);
}

.contact-form {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 30px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-form:hover {
transform: scale(1.01);
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.2);
}
.contact-input {
background: rgba(255,255,255,0.05);
border: 1px solid var(--border-glass);
color: white;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
width: 100%;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.contact-input:hover {
transform: scale(1.01) !important;
border-color: rgba(139, 92, 246, 0.5) !important;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25) !important;
}
.contact-input:focus {
background: rgba(255,255,255,0.1) !important;
border-color: var(--brand-primary) !important;
color: white !important;
box-shadow: 0 0 20px rgba(139, 92, 246, 0.4) !important;
outline: none !important;
transform: scale(1.02) !important;
}
.contact-textarea {
min-height: 150px;
resize: vertical;
}

/* Style dla nowego panelu administratora */
.admin-stats-card {
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-glass);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
.admin-stats-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.2);
}
.admin-stat-value {
font-size: 2rem;
font-weight: 700;
color: var(--brand-primary);
}
.admin-stat-label {
font-size: 0.8rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.admin-user-table {
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-glass);
border-radius: 16px;
overflow: hidden;
}
.admin-user-table .table {
margin-bottom: 0;
}
.admin-user-table .table th {
border-bottom: 1px solid var(--border-glass);
color: white;
font-weight: 600;
}
.admin-user-table .table td {
border-bottom: 1px solid rgba(255,255,255,0.05);
color: var(--text-muted);
}
.admin-user-table .table tbody tr:hover {
background-color: rgba(255,255,255,0.05);
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.user-status-badge {
font-size: 0.75rem;
padding: 4px 8px;
border-radius: 4px;
}
.user-status-pending {
background: rgba(255, 193, 7, 0.2);
color: #ffc107;
}
.user-status-verified {
background: rgba(40, 167, 69, 0.2);
color: #28a745;
}
.user-status-rejected {
background: rgba(220, 53, 69, 0.2);
color: #dc3545;
}
.campaign-form-container {
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-glass);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.campaign-list-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.campaign-list-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.2);
}
.campaign-status {
font-size: 0.75rem;
padding: 4px 8px;
border-radius: 4px;
}
.campaign-status-active {
background: rgba(40, 167, 69, 0.2);
color: #28a745;
}
.campaign-status-closed {
background: rgba(220, 53, 69, 0.2);
color: #dc3545;
}
.payment-form-container {
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-glass);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.payment-history-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.payment-history-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.2);
}
.payment-status {
font-size: 0.75rem;
padding: 4px 8px;
border-radius: 4px;
}
.payment-status-pending {
background: rgba(255, 193, 7, 0.2);
color: #ffc107;
}
.payment-status-completed {
background: rgba(40, 167, 69, 0.2);
color: #28a745;
}
.payment-status-failed {
background: rgba(220, 53, 69, 0.2);
color: #dc3545;
}
.rate-card-container {
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-glass);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.rate-card-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.rate-card-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.2);
}
.rate-card-platform {
font-size: 1.2rem;
font-weight: 600;
color: white;
margin-bottom: 1rem;
}
.rate-card-rates {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.rate-card-rate {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 1rem;
text-align: center;
}
.rate-card-rate-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--brand-primary);
}
.rate-card-rate-label {
font-size: 0.8rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}

/* --- AGRESYWNA POPRAWKA: MODALE MUSZĄ MIEĆ NAJWYŻSZY Z-INDEX --- */
/* Używamy !important, aby na pewno nadpisać inne style */
.modal {
z-index: 1060 !important;
}
.modal-backdrop {
z-index: 1050 !important;
}
.modal-content {
z-index: 1061 !important;
}
/* Upewnij się, że nic nie przykrywa modali */
.glass-navbar { z-index: 1040 !important; }
.navbar-fixed-top { z-index: 1040 !important; }

/* --- ULTIMATNA POPRAWKA DIAGNOSTYCZNA: WYMUSZENIE WIDOCZNOŚCI MODALA --- */
/* Usuwamy klasę 'fade' z HTML, aby wyłączyć animację i sprawdzić, czy to jej wina. */
/* <div class="modal" id="authModal" ...> (zamiast <div class="modal fade" ...>) */

/* Teraz wymuszamy widoczność, gdy Bootstrap doda klasę .show */
.modal.show {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 99999 !important; /* Bardzo wysoki z-index */
}

/* Upewniamy się, że dialog i treść są też widoczne */
.modal.show .modal-dialog {
opacity: 1 !important;
transform: none !important;
}

.modal.show .modal-content {
opacity: 1 !important;
visibility: visible !important;
z-index: 100000 !important; /* Jeszcze wyżej */
}

/* NOWE: Style dla panelu wyceny */
.pricing-details-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.pricing-details-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border-color: rgba(255,255,255,0.2);
}
.pricing-details-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.pricing-details-title {
font-size: 1.1rem;
font-weight: 600;
color: white;
}
.pricing-details-amount {
font-size: 1.5rem;
font-weight: 700;
color: var(--brand-secondary);
}
.pricing-component {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
font-size: 0.9rem;
}
.pricing-component-label {
color: var(--text-muted);
}
.pricing-component-value {
color: white;
font-weight: 500;
}
.pricing-disclaimer {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--border-glass);
font-size: 0.8rem;
color: rgba(255,255,255,0.5);
text-align: center;
}
.verification-data-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
}
.verification-data-card h5 {
color: white;
margin-bottom: 15px;
}
.verification-section {
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.verification-section:last-child {
border-bottom: none;
padding-bottom: 0;
}
.verification-platform-label {
color: rgba(255,255,255,0.7);
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 6px;
}
.verification-label-small {
color: rgba(255,255,255,0.6);
font-size: 0.8rem;
margin-bottom: 4px;
}
.verification-data-value {
color: white;
font-weight: 600;
font-size: 0.95rem;
line-height: 1.4;
word-break: break-word;
}
.verification-stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 0.85rem;
}
.verification-stat-label {
color: rgba(255,255,255,0.5);
}
.verification-stat-value {
color: white;
font-weight: 500;
}
.verification-data-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.verification-data-label {
color: var(--text-muted);
}

/* NOWE: Style dla kampanii pasujących do kategorii */
.campaign-matching-categories {
background: rgba(40, 167, 69, 0.1);
border: 1px solid rgba(40, 167, 69, 0.3);
border-radius: 8px;
padding: 8px 12px;
margin-top: 10px;
min-height: 45px;
box-sizing: border-box;
}
.campaign-matching-categories-title {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 5px;
}
.campaign-matching-categories-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.campaign-matching-category {
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 50px;
background: rgba(40, 167, 69, 0.2);
color: #28a745;
}

/* NOWE: Style dla sekcji dołączonych kampanii */
.campaign-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
transition: all 0.3s ease;
}

.campaign-item:hover {
background: rgba(255,255,255,0.05);
transform: translateY(-2px);
}

.campaign-item h5 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}

.campaign-item p {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}

.campaign-item .badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}

/* Poprawka dla modalu rejestracji - responsywność */
.modal-dialog {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-content {
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-body {
    overflow-y: auto;
    max-height: calc(90vh - 140px); /* 140px to szacowana wysokość nagłówka i stopki */
}

/* Dodatkowe style dla mniejszych ekranów */
@media (max-width: 768px) {
    .modal-dialog {
        max-height: 95vh;
        margin: 10px;
    }
    
    .modal-body {
        max-height: calc(95vh - 140px);
    }
    
    /* Zmniejszenie paddingów w formularzu rejestracji na mniejszych ekranach */
    #register-tab-pane .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    #register-tab-pane .form-label {
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 768px) {
.scene-container { display: none; }
h1 { font-size: 2.5rem; }
section { padding-top: 60px; }
.dashboard-header h1 { font-size: 2rem; }
.dashboard-header .balance-amount { font-size: 2rem; }
.pending-user-header {
flex-direction: column;
gap: 15px;
}
.pending-user-actions {
width: 100%;
justify-content: stretch;
}
.pending-user-actions button {
flex: 1;
}
.process-step::after {
display: none;
}
.comparison-table {
font-size: 0.9rem;
}
.comparison-table th,
.comparison-table td {
padding: 10px;
}

/* NOWE: Style dla modalu wypłaty */
.withdrawal-balance-display {
background: rgba(40, 167, 69, 0.1);
border: 2px solid rgba(40, 167, 69, 0.3);
border-radius: 12px;
}
.withdrawal-amount {
font-size: 2rem;
font-weight: 700;
color: #28a745;
}
.withdrawal-type-selector {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.withdrawal-type-option {
flex: 1;
min-width: 200px;
cursor: pointer;
position: relative;
}
.withdrawal-type-option input[type="radio"] {
position: absolute;
opacity: 0;
}
.withdrawal-type-card {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: rgba(255,255,255,0.03);
border: 2px solid rgba(255,255,255,0.1);
border-radius: 16px;
transition: all 0.3s ease;
}
.withdrawal-type-option input:checked + .withdrawal-type-card {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.15));
border-color: rgba(139, 92, 246, 0.6);
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}
.withdrawal-type-option input:checked + .withdrawal-type-card .withdrawal-type-icon {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
transform: scale(1.1);
}
.withdrawal-type-card:hover {
border-color: rgba(139, 92, 246, 0.4);
transform: translateY(-2px);
}
.withdrawal-type-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.08);
border-radius: 14px;
font-size: 1.8rem;
color: white;
transition: all 0.3s ease;
}
.withdrawal-type-info {
flex: 1;
}
.withdrawal-type-title {
color: white;
font-weight: 600;
font-size: 1.1rem;
}
.withdrawal-type-desc {
color: rgba(255,255,255,0.5);
font-size: 0.85rem;
}
.withdrawal-form-section {
background: rgba(255,255,255,0.02);
border-radius: 12px;
padding: 20px;
margin-top: 15px;
}
.glass-input {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: white;
}
.glass-input:focus {
background: rgba(255,255,255,0.1);
border-color: rgba(13, 110, 253, 0.5);
color: white;
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
}
.glass-input::placeholder {
color: rgba(255,255,255,0.3);
}
.form-select glass-input {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
}

/* ==================== ULEPSZONE STYLE DLA WYPŁAT ==================== */

/* Nowy przycisk akcji wypłaty */
.withdrawal-action-card {
    position: relative;
    background: linear-gradient(145deg, rgba(30, 30, 45, 0.9), rgba(20, 20, 35, 0.95));
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 24px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Efekt świecącej krawędzi */
.withdrawal-action-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #7c3aed, #a855f7, #c084fc, #a855f7, #7c3aed);
    background-size: 300% 300%;
    border-radius: 26px;
    z-index: -1;
    opacity: 0;
    animation: cardBorderGlow 4s linear infinite;
    transition: opacity 0.4s ease;
    filter: blur(6px);
}

@keyframes cardBorderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.withdrawal-action-card:hover::before {
    opacity: 0.6;
}

.withdrawal-action-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.withdrawal-action-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(139, 92, 246, 0.7);
    box-shadow:
        0 20px 60px rgba(139, 92, 246, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 0 80px rgba(139, 92, 246, 0.2);
}

.withdrawal-action-card:hover .withdrawal-action-bg {
    opacity: 0.12;
}

.withdrawal-action-card:active {
    transform: translateY(-3px) scale(1.01);
}

.withdrawal-action-content {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.7), rgba(25, 25, 40, 0.8));
    backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Uniwersalna reguła - cały tekst wewnątrz karty wypłaty musi być biały */
.withdrawal-action-content *,
.withdrawal-action-content span,
.withdrawal-action-content i,
.withdrawal-action-card *,
.withdrawal-action-card span,
.withdrawal-action-card i {
    color: #ffffff !important;
}

/* Specyficzne kolory dla podtytułu (nieco jaśniejszy) */
.withdrawal-action-content .withdrawal-action-subtitle,
.withdrawal-action-card .withdrawal-action-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}

.withdrawal-action-content .withdrawal-action-arrow i,
.withdrawal-action-card .withdrawal-action-arrow i {
    color: var(--brand-primary) !important;
}

.withdrawal-action-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}

.withdrawal-action-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #7c3aed, #a855f7, #c084fc);
    background-size: 200% 200%;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    box-shadow:
        0 10px 35px rgba(139, 92, 246, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    animation: iconGradient 4s ease infinite;
}

@keyframes iconGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.withdrawal-action-card:hover .withdrawal-action-icon {
    transform: scale(1.15) rotate(-8deg);
    box-shadow:
        0 15px 45px rgba(139, 92, 246, 0.7),
        0 0 0 2px rgba(255, 255, 255, 0.25) inset;
}

.withdrawal-action-icon i {
    color: #ffffff !important;
}

.withdrawal-action-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Upewnij się że cały tekst w karcie wypłaty jest biały */
.withdrawal-action-text *,
.withdrawal-action-text span,
.withdrawal-action-text small {
    color: #ffffff !important;
}

.withdrawal-action-text .withdrawal-action-subtitle {
    color: rgba(255, 255, 255, 0.65) !important;
}

.withdrawal-action-card:hover .withdrawal-action-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}

.withdrawal-action-title {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.withdrawal-action-card:hover .withdrawal-action-title {
    transform: translateX(3px);
}

.withdrawal-action-subtitle {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.87rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.withdrawal-action-card:hover .withdrawal-action-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}

.withdrawal-action-arrow {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.15));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary) !important;
    font-size: 1.3rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.withdrawal-action-card:hover .withdrawal-action-arrow {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 85, 247, 0.3));
    transform: translateX(6px) scale(1.05);
    color: #ffffff !important;
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.withdrawal-action-arrow i {
    color: inherit !important;
}

/* ==================== ULEPSZONY PRZYCISK WYPŁATY ==================== */
.btn-withdrawal-main {
    position: relative;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 25%, #c084fc 50%, #a855f7 75%, #7c3aed 100%);
    background-size: 200% 200%;
    border: none;
    color: white;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow:
        0 8px 30px rgba(139, 92, 246, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 0 20px rgba(168, 85, 247, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Efekt świecącej krawędzi */
.btn-withdrawal-main::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #7c3aed, #a855f7, #c084fc, #a855f7, #7c3aed);
    background-size: 400% 400%;
    border-radius: 22px;
    z-index: -1;
    opacity: 0;
    animation: borderGlow 3s linear infinite;
    transition: opacity 0.3s ease;
    filter: blur(8px);
}

@keyframes borderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.btn-withdrawal-main:hover::before {
    opacity: 0.7;
}

/* Efekt shine przy hover */
.btn-withdrawal-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.6s ease;
}

.btn-withdrawal-main:hover::after {
    left: 100%;
}

.btn-withdrawal-main:hover {
    box-shadow:
        0 15px 50px rgba(139, 92, 246, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 0 40px rgba(168, 85, 247, 0.5);
    transform: translateY(-4px) scale(1.03);
    color: white;
}

.btn-withdrawal-main:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 8px 30px rgba(139, 92, 246, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.btn-withdrawal-main i {
    font-size: 1.4rem;
    color: #ffffff !important;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.btn-withdrawal-main:hover i {
    transform: scale(1.1) rotate(-5deg);
}

.btn-withdrawal-main span {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    color: #ffffff !important;
}

/* ==================== ULEPSZONY PRZYCISK SUBMIT WYPŁATY ==================== */
.btn-withdrawal-submit {
    position: relative;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 25%, #c084fc 50%, #a855f7 75%, #7c3aed 100%);
    background-size: 200% 200%;
    border: none;
    color: white;
    font-weight: 700;
    padding: 20px 36px;
    border-radius: 18px;
    box-shadow:
        0 10px 35px rgba(139, 92, 246, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%;
    font-size: 1.15rem;
    overflow: hidden;
    animation: submitGradient 3s ease infinite;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes submitGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Efekt świecącej krawędzi */
.btn-withdrawal-submit::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #7c3aed, #a855f7, #c084fc, #a855f7, #7c3aed);
    background-size: 400% 400%;
    border-radius: 20px;
    z-index: -1;
    opacity: 0;
    animation: submitBorderGlow 3s linear infinite;
    transition: opacity 0.3s ease;
    filter: blur(10px);
}

@keyframes submitBorderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.btn-withdrawal-submit:hover::before {
    opacity: 0.8;
}

/* Efekt shine przy hover */
.btn-withdrawal-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    transition: left 0.6s ease;
}

.btn-withdrawal-submit:hover::after {
    left: 100%;
}

.btn-withdrawal-submit:hover {
    box-shadow:
        0 20px 60px rgba(139, 92, 246, 0.7),
        0 0 0 2px rgba(255, 255, 255, 0.25) inset;
    transform: translateY(-4px) scale(1.02);
    color: white;
}

.btn-withdrawal-submit:active {
    transform: translateY(-2px) scale(1.01);
}

.btn-withdrawal-submit span {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Przycisk powrotu */
.btn-back {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateX(-3px);
}

/* ==================== ULEPSZONE KARTY WYPŁATY ==================== */

/* Główna karta typu wypłaty */
.withdrawal-type-card {
    position: relative;
    background: linear-gradient(145deg, rgba(40, 40, 60, 0.95), rgba(25, 25, 45, 0.98));
    border: 3px solid rgba(139, 92, 246, 0.4);
    border-radius: 32px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(139, 92, 246, 0.1) inset;
}

/* Efekt świecącej krawędzi - animacja */
.withdrawal-type-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #7c3aed, #a855f7, #c084fc, #a855f7, #7c3aed);
    background-size: 400% 400%;
    border-radius: 34px;
    z-index: -1;
    opacity: 0.3;
    animation: typeCardBorderGlow 3s linear infinite;
    filter: blur(8px);
}

@keyframes typeCardBorderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Efekt wewnętrznego światła */
.withdrawal-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.25), transparent 70%);
    opacity: 0.5;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.withdrawal-card-glow-company {
    background: radial-gradient(circle at 50% 0%, rgba(236, 72, 153, 0.25), transparent 70%);
}

/* HOVER - mocny efekt */
.withdrawal-type-card:hover {
    transform: translateY(-16px) scale(1.05);
    border-color: rgba(139, 92, 246, 0.8);
    box-shadow:
        0 35px 90px rgba(139, 92, 246, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.2) inset,
        0 0 150px rgba(139, 92, 246, 0.3);
}

.withdrawal-type-card:hover::before {
    opacity: 0.8;
}

.withdrawal-type-card:hover .withdrawal-card-glow {
    opacity: 1;
}

.withdrawal-card-company:hover {
    border-color: rgba(236, 72, 153, 0.8);
    box-shadow:
        0 35px 90px rgba(236, 72, 153, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.2) inset,
        0 0 150px rgba(236, 72, 153, 0.3);
}

/* CLICK - efekt kliknięcia */
.withdrawal-type-card:active {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 15px 40px rgba(139, 92, 246, 0.4),
        0 0 0 3px rgba(139, 92, 246, 0.5) inset;
}

.withdrawal-card-company:active {
    box-shadow:
        0 15px 40px rgba(236, 72, 153, 0.4),
        0 0 0 3px rgba(236, 72, 153, 0.5) inset;
}

/* ACTIVE state - po wybraniu */
.withdrawal-type-card.active {
    border-color: #a855f7;
    background: linear-gradient(145deg, rgba(89, 59, 129, 0.8), rgba(59, 39, 99, 0.95));
    box-shadow:
        0 0 0 5px rgba(139, 92, 246, 0.4),
        0 30px 80px rgba(139, 92, 246, 0.6),
        0 0 150px rgba(139, 92, 246, 0.4);
    transform: scale(1.04);
    animation: cardPulse 2s ease-in-out infinite;
}

@keyframes cardPulse {
    0%, 100% {
        box-shadow:
            0 0 0 5px rgba(139, 92, 246, 0.4),
            0 30px 80px rgba(139, 92, 246, 0.6),
            0 0 150px rgba(139, 92, 246, 0.4);
    }
    50% {
        box-shadow:
            0 0 0 5px rgba(139, 92, 246, 0.6),
            0 30px 80px rgba(139, 92, 246, 0.8),
            0 0 180px rgba(139, 92, 246, 0.5);
    }
}

.withdrawal-card-company.active {
    border-color: #f472b6;
    background: linear-gradient(145deg, rgba(129, 59, 89, 0.8), rgba(79, 39, 59, 0.95));
    box-shadow:
        0 0 0 5px rgba(236, 72, 153, 0.4),
        0 30px 80px rgba(236, 72, 153, 0.6),
        0 0 150px rgba(236, 72, 153, 0.4);
}

/* Efekt hover na ikonie karty */
.withdrawal-type-card:hover .withdrawal-card-icon {
    transform: scale(1.25) rotate(-10deg);
    box-shadow:
        0 25px 60px rgba(139, 92, 246, 0.8),
        0 0 0 3px rgba(255, 255, 255, 0.3) inset;
}

.withdrawal-card-company:hover .withdrawal-card-icon {
    box-shadow:
        0 25px 60px rgba(236, 72, 153, 0.8),
        0 0 0 3px rgba(255, 255, 255, 0.3) inset;
}

.withdrawal-type-card.active .withdrawal-card-icon {
    transform: scale(1.3);
    box-shadow:
        0 0 60px rgba(139, 92, 246, 1),
        0 0 0 4px rgba(255, 255, 255, 0.4) inset;
    animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.35);
    }
}

.withdrawal-card-company.active .withdrawal-card-icon {
    box-shadow:
        0 0 60px rgba(236, 72, 153, 1),
        0 0 0 4px rgba(255, 255, 255, 0.4) inset;
}

/* Inner card */
.withdrawal-card-inner {
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 28px;
    position: relative;
    z-index: 1;
}

.withdrawal-card-header,
.withdrawal-card-body {
    pointer-events: none;
}

/* Card header */
.withdrawal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Card icon */
.withdrawal-card-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.withdrawal-card-icon-individual {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.withdrawal-card-icon-company {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
}

.withdrawal-type-card:hover .withdrawal-card-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.5);
}

.withdrawal-card-company:hover .withdrawal-card-icon {
    box-shadow: 0 15px 40px rgba(236, 72, 153, 0.5);
}

.withdrawal-type-card.active .withdrawal-card-icon {
    transform: scale(1.15);
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
}

.withdrawal-card-company.active .withdrawal-card-icon {
    box-shadow: 0 0 40px rgba(236, 72, 153, 0.6);
}

.withdrawal-card-icon i {
    color: white;
}

/* Radio indicator */
.withdrawal-card-radio {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.withdrawal-card-radio span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand-primary);
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.withdrawal-type-card:hover .withdrawal-card-radio {
    border-color: rgba(139, 92, 246, 0.5);
}

.withdrawal-card-company:hover .withdrawal-card-radio {
    border-color: rgba(236, 72, 153, 0.5);
}

.withdrawal-type-card.active .withdrawal-card-radio {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.withdrawal-card-company.active .withdrawal-card-radio {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.2);
}

.withdrawal-card-company.active .withdrawal-card-radio span {
    background: var(--brand-secondary);
}

.withdrawal-type-card.active .withdrawal-card-radio span {
    transform: scale(1);
}

/* Card body */
.withdrawal-card-body {
    text-align: left;
}

.withdrawal-card-title {
    color: #ffffff !important;
    font-weight: 800;
    font-size: 1.55rem;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.withdrawal-type-card:hover .withdrawal-card-title {
    transform: translateX(4px);
    transition: transform 0.3s ease;
}

.withdrawal-card-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.2));
    border: 2px solid rgba(139, 92, 246, 0.6);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 18px;
    border-radius: 20px;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.withdrawal-card-badge-company {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.1));
    border-color: rgba(236, 72, 153, 0.4);
    color: #f9a8d4;
}

.withdrawal-card-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.withdrawal-card-text i {
    color: #4ade80 !important;
    font-size: 1.25rem;
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.5));
}

.withdrawal-card-company .withdrawal-card-text i {
    color: #f472b6 !important;
    filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.5));
}

/* Ikona typu wypłaty */
.withdrawal-type-icon-wrapper {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.5);
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.withdrawal-type-card-btn:hover .withdrawal-type-icon-wrapper {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.7);
}

.withdrawal-type-icon-wrapper i {
    color: #fff;
}

/* Ikona dla firmy (różowa) */
.withdrawal-type-icon-company {
    background: linear-gradient(135deg, #ec4899, #f472b6);
    box-shadow: 0 10px 30px rgba(236, 72, 153, 0.5);
}

.withdrawal-type-card-company:hover .withdrawal-type-icon-company {
    box-shadow: 0 15px 40px rgba(236, 72, 153, 0.7);
}

/* Treść karty */
.withdrawal-type-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.withdrawal-type-content h5 {
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

/* Badge z typem podatku */
.withdrawal-type-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: var(--brand-primary);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.withdrawal-type-badge-company {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(244, 114, 182, 0.15));
    border-color: rgba(236, 72, 153, 0.4);
    color: var(--brand-secondary);
}

/* Opis karty */
.withdrawal-type-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
}

.withdrawal-type-desc i {
    color: var(--brand-primary);
    font-size: 1rem;
}

.withdrawal-type-card-company .withdrawal-type-desc i {
    color: var(--brand-secondary);
}

/* Strzałka */
.withdrawal-type-arrow {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.withdrawal-type-card-btn:hover .withdrawal-type-arrow {
    background: rgba(139, 92, 246, 0.3);
    color: white;
    transform: translateX(5px);
}

.withdrawal-type-card-company:hover .withdrawal-type-arrow {
    background: rgba(236, 72, 153, 0.3);
}

/* Responsywność */
@media (max-width: 768px) {
    .withdrawal-card-inner {
        padding: 20px;
    }

    .withdrawal-card-icon {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }

    .withdrawal-card-header {
        margin-bottom: 16px;
    }

    .withdrawal-card-radio {
        width: 24px;
        height: 24px;
    }

    .withdrawal-card-radio span {
        width: 10px;
        height: 10px;
    }

    .withdrawal-card-title {
        font-size: 1.15rem;
    }

    .withdrawal-card-badge {
        font-size: 0.75rem;
        padding: 5px 12px;
    }

    .withdrawal-card-text {
        font-size: 0.85rem;
    }
}

.type-selection-icon {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Różowa ikona dla firmy */
.type-selection-card:nth-child(2) .type-selection-icon {
    background: linear-gradient(135deg, #ec4899, #f472b6);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
}

.type-selection-card:hover .type-selection-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.6);
}

.type-selection-card:nth-child(2):hover .type-selection-icon {
    box-shadow: 0 12px 35px rgba(236, 72, 153, 0.6);
}

.type-selection-icon i {
    color: #fff;
}

.type-selection-content {
    position: relative;
    z-index: 1;
}

.type-selection-content h5 {
    color: white;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.type-selection-content p {
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.type-selection-content small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* Box z saldem */
.balance-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px;
    backdrop-filter: blur(12px);
}

.balance-box .balance-amount {
    font-size: 2rem;
    font-weight: 800;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Wyświetlanie kwoty */
.amount-display {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.08));
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.amount-display span {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Ikona nagłówka */
.withdrawal-header-icon {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: white;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
}

.withdrawal-step {
    padding: 0;
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.withdrawal-step.d-none {
    display: none !important;
}

/* Modal content transition */
#withdrawalModal .modal-body {
    position: relative;
    min-height: 400px;
}

/* Balance display animation */
.withdrawal-balance-display {
    animation: slideInLeft 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

/* Efekt świecącej krawędzi dla karty salda */
.withdrawal-balance-display::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(40, 167, 69, 0.1) 50%,
        transparent 70%
    );
    animation: balanceShine 3s linear infinite;
}

@keyframes balanceShine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Efekt pulsowania dla kwoty salda */
.withdrawal-amount {
    animation: amountPulse 2s ease-in-out infinite;
}

@keyframes amountPulse {
    0%, 100% {
        text-shadow: 0 0 20px rgba(40, 167, 69, 0.5);
    }
    50% {
        text-shadow: 0 0 30px rgba(40, 167, 69, 0.8), 0 0 40px rgba(40, 167, 69, 0.4);
    }
}

/* Staggered animation for type cards */
.withdrawal-type-card:nth-child(1) {
    animation: fadeInUp 0.5s ease-out 0.1s both;
}

.withdrawal-type-card:nth-child(2) {
    animation: fadeInUp 0.5s ease-out 0.2s both;
}

/* Amount display pulse animation */
.amount-display {
    animation: scaleIn 0.4s ease-out;
    position: relative;
    overflow: hidden;
}

/* Efekt świecenia dla kwoty */
.amount-display::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(139, 92, 246, 0.15) 50%,
        transparent 70%
    );
    animation: amountShine 4s linear infinite;
}

@keyframes amountShine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Efekt gradientu dla tekstu kwoty */
.amount-display span {
    background: linear-gradient(135deg, #a855f7, #c084fc, #a855f7);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientFlow 3s ease infinite;
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Form input focus effects */
.glass-input:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2);
}

/* Form input validation styles */
.glass-input.is-valid {
    border-color: #28a745 !important;
    background: rgba(40, 167, 69, 0.05);
}

.glass-input.is-invalid {
    border-color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.05);
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.glass-input.is-valid:focus {
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
}

.glass-input.is-invalid:focus {
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}

/* Alert styles */
.alert-info {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    padding: 16px 20px;
    backdrop-filter: blur(8px);
}

.alert-info i {
    color: var(--brand-primary);
}

/* ==================== ULEPSZONY MODAL WYPŁATY ==================== */
#withdrawalModal .modal-dialog {
    max-width: 680px;
}

#withdrawalModal .modal-content {
    background: linear-gradient(145deg, rgba(25, 25, 35, 0.98), rgba(15, 15, 25, 0.99));
    backdrop-filter: blur(40px);
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 28px;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 80px rgba(139, 92, 246, 0.1);
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#withdrawalModal .modal-body {
    padding: 12px 32px 32px;
}

#withdrawalModal .modal-header {
    padding: 26px 32px 0;
    border: none;
}

#withdrawalModal .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.6;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#withdrawalModal .btn-close:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    transform: rotate(90deg) scale(1.1);
}

#withdrawalModal h4 {
    color: white;
    font-weight: 700;
    font-size: 1.7rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#withdrawalModal .form-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

#withdrawalModal .glass-input {
    height: 52px;
    font-size: 1.02rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
    border: 2px solid rgba(255, 255, 255, 0.12);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#withdrawalModal .glass-input:focus {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06));
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow:
        0 0 0 4px rgba(139, 92, 246, 0.15),
        0 8px 30px rgba(139, 92, 246, 0.2);
    color: white;
    transform: translateY(-2px);
}

#withdrawalModal .glass-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

#withdrawalModal .form-select {
    height: 52px;
    font-size: 1.02rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
    border: 2px solid rgba(255, 255, 255, 0.12);
    color: white;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#withdrawalModal .form-select:focus {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06));
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow:
        0 0 0 4px rgba(139, 92, 246, 0.15),
        0 8px 30px rgba(139, 92, 246, 0.2);
    color: white;
    transform: translateY(-2px);
}

#withdrawalModal .input-group .glass-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#withdrawalModal .input-group-text {
    height: 52px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.1));
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-left: none;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    font-size: 1rem;
}

/* Efekt świecącego header icon */
.withdrawal-header-icon {
    animation: headerIconPulse 2s ease-in-out infinite;
}

@keyframes headerIconPulse {
    0%, 100% {
        box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
    }
    50% {
        box-shadow: 0 8px 40px rgba(139, 92, 246, 0.8), 0 0 50px rgba(139, 92, 246, 0.3);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .type-selection-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .type-selection-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .type-selection-content h5 {
        font-size: 1rem;
    }

    .type-selection-content p {
        font-size: 0.85rem;
    }

    .btn-withdrawal-main {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .btn-withdrawal-main i {
        font-size: 1.1rem;
    }

    #withdrawalModal .modal-content {
        border-radius: 20px;
    }

    #withdrawalModal .modal-body {
        padding: 10px 20px 20px;
    }

    #withdrawalModal .modal-header {
        padding: 20px 20px 0;
    }

    .withdrawal-header-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .amount-display {
        font-size: 2rem;
        padding: 20px;
    }
}