.kamar-nc-zdrapka { margin: 10px auto 0; text-align: center; max-width: 340px; }
.kamar-nc-zdrapka .kamar-nc-zdrapka__kod,
.kamar-nc-zdrapka .kamar-nc-zdrapka__kod:hover,
.kamar-nc-zdrapka .kamar-nc-zdrapka__kod:focus,
.kamar-nc-zdrapka .kamar-nc-zdrapka__kod:active {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
margin: 0;
padding: 14px 18px 12px;
overflow: hidden;
cursor: pointer;
color: #fff;
background: radial-gradient(ellipse at 30% 20%, #1b4a62 0%, #0f3144 55%, #09202e 100%);
border: 2px solid #aab2bc;
border-radius: 10px;
box-shadow: 0 6px 16px rgba(9, 32, 46, .35), inset 0 0 0 1px rgba(255, 255, 255, .08);
font: inherit;
text-transform: none;
line-height: 1.2;
}
.kamar-nc-zdrapka .kamar-nc-zdrapka__kod:hover { background: radial-gradient(ellipse at 30% 20%, #235a77 0%, #143a50 55%, #0b2636 100%); border-color: #d3d8de; }
.kamar-nc-zdrapka .kamar-nc-zdrapka__kod:focus-visible {
outline: 3px solid #103547;
outline-offset: 3px;
box-shadow: 0 0 0 2px rgba(16, 53, 71, .15);
}
.kamar-nc-zdrapka__wartosc {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 26px;
font-weight: 800;
letter-spacing: 3px;
color: #fff;
text-shadow: 0 1px 8px rgba(246, 183, 103, .35);
}
.kamar-nc-zdrapka__akcja { font-size: 12px; font-weight: 600; color: #F6B767; }
.kamar-nc-zdrapka .kamar-nc-zdrapka__kod.is-skopiowany::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 55%;
pointer-events: none;
background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .15) 30%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .15) 70%, transparent 100%);
transform: translateX(-130%) skewX(-18deg);
animation: kamar-nc-blysk-kopiowania .85s cubic-bezier(.35, .1, .25, 1) 1 forwards;
}
.kamar-nc-zdrapka__kod.is-skopiowany .kamar-nc-zdrapka__wartosc {
animation: kamar-nc-rozblysk-kodu .85s ease-out 1;
}
.kamar-nc-zdrapka__kod.is-skopiowany .kamar-nc-zdrapka__akcja { color: #ffffff; }
@keyframes kamar-nc-blysk-kopiowania {
0% { transform: translateX(-130%) skewX(-18deg); opacity: 1; }
85% { opacity: 1; }
100% { transform: translateX(300%) skewX(-18deg); opacity: 0; }
}
@keyframes kamar-nc-rozblysk-kodu {
0% { text-shadow: 0 1px 8px rgba(246, 183, 103, .35); }
40% { text-shadow: 0 0 14px rgba(255, 255, 255, .95), 0 0 28px rgba(246, 183, 103, .85); }
100% { text-shadow: 0 1px 8px rgba(246, 183, 103, .35); }
}
@media (prefers-reduced-motion: reduce) {
.kamar-nc-zdrapka .kamar-nc-zdrapka__kod.is-skopiowany::after,
.kamar-nc-zdrapka__kod.is-skopiowany .kamar-nc-zdrapka__wartosc { animation: none; }
.kamar-nc-zdrapka .kamar-nc-zdrapka__kod.is-skopiowany::after { display: none; }
}
.kamar-nc-zdrapka__folia,
.kamar-nc-zdrapka__wierzch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.kamar-nc-zdrapka .kamar-nc-zdrapka__notka { margin: 8px 0 0; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: normal; text-transform: none; color: #103547; }
.kamar-nc-zdrapka .kamar-nc-zdrapka__zastosuj { display: block; width: auto; min-width: 58%; max-width: 100%; margin: 10px auto 0; padding: 9px 28px; background: linear-gradient(135deg, #035c24 0%, #046b2c 50%, #067f36 100%); border: 1px solid #046b2c; border-radius: 10px; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.kamar-nc-zdrapka .kamar-nc-zdrapka__zastosuj:hover,
.kamar-nc-zdrapka .kamar-nc-zdrapka__zastosuj:focus,
.kamar-nc-zdrapka .kamar-nc-zdrapka__zastosuj:focus-visible { background: linear-gradient(135deg, #035c24 0%, #046b2c 50%, #067f36 100%); border-color: #035723; color: #fff; outline: none; box-shadow: 0 0 0 3px rgba(4, 107, 44, .25); }
.kamar-nc-zdrapka .kamar-nc-zdrapka__zastosuj:disabled { opacity: .7; cursor: default; }
.kamar-nc-zdrapka .kamar-nc-zdrapka__stan { margin: 6px 0 0; font-family: inherit; font-size: 13px; font-weight: 600; color: #046b2c; }
.kamar-nc-zdrapka .kamar-nc-zdrapka__stan.is-blad { color: #962020; }
.kamar-nc-zdrapka .kamar-nc-zdrapka__stan a { color: inherit; text-decoration: underline; }
.kamar-nc-zdrapka .kamar-nc-zdrapka__zastosuj.is-gotowe:disabled { opacity: 1; background: linear-gradient(135deg, #035c24 0%, #046b2c 50%, #067f36 100%); border-color: #035723; color: #fff; }
.kamar-nc-zdrapka-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2147483000; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: max-content; max-width: min(520px, calc(100vw - 32px)); padding: 12px 14px 12px 16px; background: #103547; color: #fff; border: 1px solid #aab2bc; border-radius: 12px; box-shadow: 0 10px 28px rgba(9, 32, 46, .4); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; animation: kamar-nc-toast-wejscie .3s ease-out 1; }
.kamar-nc-zdrapka-toast.is-blad { border-color: #ffc9c9; }
.kamar-nc-zdrapka-toast .kamar-nc-zdrapka-toast__zamknij { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.kamar-nc-zdrapka-toast .kamar-nc-zdrapka-toast__zamknij:hover,
.kamar-nc-zdrapka-toast .kamar-nc-zdrapka-toast__zamknij:focus,
.kamar-nc-zdrapka-toast .kamar-nc-zdrapka-toast__zamknij:focus-visible { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
@keyframes kamar-nc-toast-wejscie {
0% { opacity: 0; transform: translate(-50%, 12px); }
100% { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.kamar-nc-zdrapka-toast { animation: none; }
}