html,
body,
* {
    margin: 0;
    padding: 0;
}
body {
    background: #00184a;
    color: #b2e3ff;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}
.clearfix {
    clear: both;
    height: 1px;
}
a {
    text-decoration: none;
    color: #b2e3ff;
}
a:hover {
    color: #0482ff;
}
a:active {
    color: #049bff;
}
a:focus {
    outline: none;
}
a img {
    border: none;
}
#btop {
    background: url(../images/ui/background.png) no-repeat top center;
    background-size: contain;
    min-height: 875px;
}
#bbtm {
    background: url(../images/ui/background_bottom.png) no-repeat bottom center;
    background-size: contain;
    min-height: 488px;
}
#wrapper {
    width: 968px;
    margin: 0 auto;
}
.wrap960 {
    width: 960px;
    margin: 0 auto;
}
.wrap930 {
    width: 930px;
    margin: 0 auto;
}
.wrap600 {
    width: 600px;
    margin: 0 auto;
}
#header {
    height: 356px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
#header a {
    margin-top: 196px;
}

#header a img {
    width: 371px;
    top: -2px;
    position: relative;
}

.logo{
    animation: logo 5s infinite ease-in-out;
    visibility: hidden;
}

.login {
    background: url(../images/nui/ranking.png) no-repeat;
    height: 387px;
    width: 253px;
    position: relative;
    left: 19px;
    top: 30px;
}

@keyframes logo{
    0% {filter: brightness(100%);}
    50% {filter: brightness(150%);}
    100% {filter: brightness(100%);}
}

.login h3 {
    position: inherit;
    top: 13px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login__form {
    position: inherit;
    top: 30px;
}

.login__form--container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.vip{
    width: 100%;
    text-align: center;
    margin-top: 2px;
}

.vip img{
    position: relative;
    top: 3px;
}

.coins {
    text-align: center;
    padding-bottom: 6px;
}

blockquote ol{
    padding-left: 12px;
}

#navbar {
    height: 63px;
    background: url(../images/ui/navbar-background.png) no-repeat top center;
    display: flex;
    justify-content: center;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 1;
}

#navbar ul {
    width: 850px;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#navbar ul li {
    display: block;
}
#navbar ul li a {
    font-size: 14px;
    color: #b2e3ff;
    font-weight: bold;
    text-shadow: 0 1px 3px #000;
    margin: 0 8.5px;
}
#navbar ul li a:hover {
    color: #0482ff;
    background-position: 0 -34px;
}
#navbar ul li a:active {
    color: #049bff;
    background-position: 0 -68px;
}
#navbar ul li a.current {
    color: #fff !important;
    background-position: 0 -68px;
}
.guild {
    background: url(../images/guild-bg.png) no-repeat;
}
#main {
    margin: 60px 0 30px 0;
}
.mtop {
    height: 119px;
    background: url("../images/nui/container_top.png") center top no-repeat;
}
.mend {
    margin-top: -75px;
    height: 118px;
    background: url("../images/nui/container_bottom.png") center bottom no-repeat;
}
.mcon {
    background: url("../images/nui/container_middle.png") repeat-y center;
    min-height: 645px;
}
.sidebar,
#content {
    margin-top: -90px;
    float: left;
    min-height: 600px;
}
.sidebar {
    width: 208px;
}
#content {
    width: 508px;
}

.postui {
    background: url(../images/ui/content_post.png);
}
.psc_postui {
    background: url(../images/ui/psc_content_post.png);
}
.post-title {
    height: 51px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 20px;
}
.post-end {
    background-position: left bottom;
    height: 12px;
}
.post-con {
    background-position: center right;
    background-repeat: repeat-y;
    line-height: 1.8;
    font-size: 11px;
}
.post-title h2 {
    color: #b2e3ff;
    font-size: 13px;
    text-shadow: 0 0 5px #000;
}
span.date {
    color: #b2e3ff;
    text-shadow: 0 0 8px #000;
    font-size: 10px;
}

.pagination{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 15px;
}

.pagination-btn {
    display: inline-block;
    padding: 8px 14px;
    min-width: 40px;
    text-align: center;
    text-decoration: none;
    color: #00507a;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 80, 122, 0.3);
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pagination-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #009ced;
    border-color: rgba(0, 156, 237, 0.5);
}

.pagination-current {
    display: inline-block;
    padding: 8px 14px;
    min-width: 40px;
    text-align: center;
    background: #00507a;
    color: #fff;
    border: 1px solid #00507a;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
}

.pagination-disabled {
    display: inline-block;
    padding: 8px 14px;
    text-align: center;
    color: rgba(0, 80, 122, 0.3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 80, 122, 0.1);
    border-radius: 4px;
    font-size: 15px;
    cursor: not-allowed;
    opacity: 0.5;
}

.pagination-prev,
.pagination-next {
    font-weight: 600;
}

.pagination-dots {
    display: inline-block;
    padding: 0 8px;
    color: rgba(0, 80, 122, 0.5);
    font-size: 16px;
    font-weight: 700;
}
.con-wrap {
    padding: 8px 25px;
}
.con-wrap p {
    padding-bottom: 15px;
}
.con-wrap p span {
    padding-bottom: 15px;
    color: #b2e3ff;
    font-size: 15px !important;
    line-height: 17px;
}
.con-wrap #text {
    color: #b2e3ff;
}
hr {
    border: 1px solid #b2e3ff;
}
.con-wrap img.thumb {
    float: left;
    border: 1px solid #a0a0a0;
    margin: 0 10px 5px 0;
    padding: 1px;
}
a.more {
    width: 101px;
    height: 26px;
    display: block;
    background: url(../images/ui/content_button.png);
    color: #00507a;
    line-height: 26px !important;
    font-size: 11px;
    text-transform: uppercase;
    text-indent: 20px;
    text-shadow: 0 1px 0 #fff, 0 1px 5px #fff, 0 0 8px #fff;
}


a.more:hover {
    color: #009ced;
    background-position: center left;
}
a.more:active {
    color: #049bff;
    background-position: bottom left;
}
#sidebar-left {
    margin: -90px 0 0 22px;
}
.sb-title {
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sb-status {
    background: url(../images/ui/sidebar_title.png);
}
.sb-statics {
    background: url(../images/ui/sidebar_title.png);
}
.sidebar h3 {
    color: #fff;
    text-shadow: 0 1px 4px #000;
    font-size: 14px;
}
.sb-sep {
    height: 4px;
    background: url(../images/ui/sidebar_sep.png) no-repeat top center;
    clear: both;
    margin: 10px auto;
}
.sb-set {
    height: 4px;
    background: url(../images/ui/sidebar_set.png) no-repeat bottom center;
    clear: both;
    margin: 10px auto;
}
.stat .sb-sep {
    margin: 1px;
}

.status {
    position: relative;
    width: 253px;
    height: 295px;
    background: url(../images/nui/status.png) no-repeat;
    left: 19px;
    top: 50px;
}

.status h3 {
    position: inherit;
    top: 13px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#status_load {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.status__channels {
    height: 246px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.status__channels p {
    font-size: 14px;
    color: rgb(0, 255, 55);
    margin-top: 5px;
}

.statistics {
    position: relative;
    width: 253px;
    height: 180px;
    background: url(../images/nui/statistics.png) no-repeat;
    right: 63px;
    top: 50px;
}

.statistics h3 {
    position: inherit;
    top: 13px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.statistics__info {
    position: relative;
    top: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.statistics__info p {
    margin-top: 7px;
}

.ranking {
    position: relative;
    width: 253px;
    height: 387px;
    background: url(../images/nui/ranking.png) no-repeat;
    right: 63px;
    top: 30px;
}

.ranking h3 {
    position: inherit;
    top: 13px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ranking__buttons{
    display: flex;
    justify-content: center;
}

.tdb{
    font-weight: bold;
}

.ranking table {
    position: inherit;
    top: 13px;
}
.ranking tr.thead {
    color: #c94949;
}
.ranking table tr {
    height: 28px;
}
.t-rank {
    width: 36px;
    text-align: center;
    text-indent: 10px;
}
.t-name {
    width: 78px;
    text-align: left;
    text-indent: 15px;
}
.t-lvl {
    width: 58px;
    text-align: center;
}
form#login {
    width: 172px;
    margin: 0 auto;
    padding-bottom: 10px;
}

a.special {
    display: block;
    height: 71px;
    width: 208px;
    margin: 0 auto 10px;
}
.rel {
    position: relative;
    bottom: 50px;
    left: 135px;
}
.character {
    background: url(../images/misc/sb_render.png);
    height: 79px;
    width: 72px;
    position: absolute;
}

.panel{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h3.panel img{
    width: 48px;
}

.item{
    height: 160px;
    width: 25%;
    float: left;
    margin-top: 10px;
}

.item-txt{
    width: 100px;
    text-align: center;
}



.sep {
    height: 4px;
    width: 491px;
    position: relative;
    right: 18px;
    background: url(../images/ui/content_sep.png) no-repeat top center;
    margin: 5px auto 10px;
}
.s15 {
    height: 15px;
}
a.sb-link {
    width: auto;
    color: #b2e3ff;
    display: flex;
    font-size: 11px;
    justify-content: center;
    padding: 6px 8px;
    margin: 2px 20px;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}
a.sb-link:nth-child(odd) {
    background: rgba(0, 0, 0, 0.15);
}
a.sb-link:nth-child(even) {
    background: rgba(4, 130, 255, 0.08);
}
a.sb-link:hover {
    background: rgba(4, 130, 255, 0.25);
    color: #fff;
}
a.sb-link:active {
    background: rgba(4, 130, 255, 0.35);
    color: #049bff;
}

.paging_full_numbers {
    width: 400px;
    height: 22px;
    line-height: 22px;
}
.paging_full_numbers span.paginate_button,
.paging_full_numbers span.paginate_active {
    border: 1px solid #aaa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    cursor: hand;
    margin: 0 3px;
    padding: 2px 5px;
}
.paging_full_numbers span.paginate_button {
    background-color: #ddd;
}
.paging_full_numbers span.paginate_button:hover {
    background-color: #ccc;
}
.paging_full_numbers span.paginate_active {
    background-color: #99b3ff;
}
table.display tr.even.row_selected td {
    background-color: #b0bed9;
}
table.display tr.odd.row_selected td {
    background-color: #9fafd1;
}
hr.hr,
.cp {
    display: none;
}

.ranking_lotto {
    height: 232px;
    background: url(../images/misc/lotto_tab.png);
    overflow: hidden;
}
.ranking_lotto h3 {
    height: 46px;
    line-height: 46px;
}
.ranking_lotto table {
    font-size: 10px;
}
.ranking_lotto tr.thead {
    color: #c94949;
}
.ranking_lotto table tr {
    height: 30px;
    background: url(http://imetin.pl) no-repeat bottom center;
}
.t-rank {
    width: 36px;
    text-align: center;
    text-indent: 10px;
}
.t-name {
    width: 78px;
    text-align: left;
    text-indent: 15px;
}
.t-lvl {
    width: 50px;
    text-align: center;
}
input.bar {
    color: black;
    font-size: 11px;
    border: 1px solid #0482ff;
    width: 160px;
    margin: 5px auto;
    padding: 8px 5px;
    background: white;
}
input.bar:hover {
    color: #666;
}
input.dels{
	border:none;
	display:block;
	height:16px;
	width:17px;
	background:url(../images/www/misc/delete.png);
	cursor:pointer;
	color:#FFF;
	font-size:17px;
	text-shadow:0 0 3px #000;
	text-align:center;
	margin:10px 0 4px
}
input.btn-small{
	border:none;
	display:block;
	height:50px;
	width:115px;
	background:url(../images/www/misc/button_small.png);
	background-position:-0px -68px;
	cursor:pointer;
	color:#FFF;
	font-size:17px;
	text-shadow:0 0 3px #000;
	text-align:center;
	margin:10px 0 4px
	}
	*>input.btn-small{padding-bottom:5px}
	input.btn-small:hover{color:#FFF;background-position:0px -7px;}
	input.btn-small:active{color:#d7e2ea;background-position:0px -125px;}
	

input.btn-small-un{
	border:none;
	display:block;
	height:50px;
	width:115px;
	background:url(../images/www/misc/button_small_unactive.png);
	background-position:-0px -68px;
	cursor:pointer;
	color:#FFF;
	font-size:17px;
	text-shadow:0 0 3px #000;
	text-align:center;
	margin:10px 0 4px
	}
	*>input.btn-small-un{padding-bottom:5px}
	input.btn-small-un:hover{color:#FFF;background-position:0px -7px;}
	input.btn-small-un:active{color:#d7e2ea;background-position:0px -125px;}
input.btn {
    height: 47px;
    width: 189px;
    background: url(../images/nui/button.png) no-repeat center top;
    color: #fff;
    text-shadow: 0 0 3px #000;
    border: 0;
    margin-top: 10px;
    cursor: pointer;
    text-align: center;
}
input.btn:active {
    filter: contrast(1.2);
}
input.btn:hover {
    filter: brightness(125%);
    transition: 0.5s;
}
input.btn:focus-visible{
    border: 0;
    outline: 0;
}
.rel {
    position: relative;
    bottom: 50px;
    left: 135px;
}
.character {
    background: url(../images/misc/sb_render.png);
    height: 79px;
    width: 72px;
    position: absolute;
}
.sep {
    height: 4px;
    width: 491px;
    position: relative;
    right: 18px;
    background: url(../images/ui/content_sep.png) no-repeat top center;
    margin: 5px auto 10px;
}
.s15 {
    height: 15px;
}
#footer {
    height: 99px;
    font-size: 11px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 20px;
    flex-direction: column;
}

a:hover{
    color: #0482ff;
}

#footer a {
    color: #b2e3ff;
}
#footer a:hover {
    text-decoration: underline;
}
#footer a:active {
    color: #049bff;
}

p.info strong {
    color: #027acd;
}

p.off strong {
    color: #027acd;
}
.paging_full_numbers {
    width: 400px;
    height: 22px;
    line-height: 22px;
}
.paging_full_numbers span.paginate_button,
.paging_full_numbers span.paginate_active {
    border: 1px solid #aaa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    cursor: hand;
    margin: 0 3px;
    padding: 2px 5px;
}
.paging_full_numbers span.paginate_button {
    background-color: #ddd;
}
.paging_full_numbers span.paginate_button:hover {
    background-color: #ccc;
}
.paging_full_numbers span.paginate_active {
    background-color: #99b3ff;
}
table.display tr.even.row_selected td {
    background-color: #b0bed9;
}
table.display tr.odd.row_selected td {
    background-color: #9fafd1;
}
hr.hr,
.cp {
    display: none;
}

input.btns {
    border: none;
    display: block;
    height: 32px;
    width: 82px;
    background: url(../images/ui/sidebar_login_buttons.png);
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    text-shadow: 0 0 3px #000;
    text-align: center;
    margin: 10px 0 4px;
}
* > input.btns {
    padding-bottom: 5px;
}
input.btns:hover {
    color: #fff;
    background-position: center center;
}
input.btns:active {
    color: #d7e2ea;
    background-position: bottom center;
}
input.button {
    border: none;
    display: block;
    height: 47px;
    width: 189px;
    background: url("../images/nui/button.png");
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 3px #000;
    text-align: center;
}

* > input.button {
    padding-bottom: 5px;
}

input.button:hover {
    filter: brightness(125%);
    transition: 0.5s;
}

input.button:active {
    filter:contrast(1.2);
}

input.button-small {
    border: none;
    display: block;
    height: 44px;
    width: 105px;
    margin: 10px 0 4px;
    background: url("../images/button-small.png");
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 3px #000;
    text-align: center;
}

* > input.button-small {
    padding-bottom: 5px;
}

input.button-small:hover {
    color: #fff;
    background-position: center center;
}

input.button-small:active {
    color: #d7e2ea;
    background-position: bottom center;
}

input.price {
    text-align: center;
    color: #575e51;
    margin: 5px auto;
    font-size: 13px;
    background: url("../images/ui/sidebar_login_bar.png");
    border: 1px solid #c4c4c4;
    padding: 8px 5px;
    width: 75px;
}

input.price:hover {
    color: #666;
    background-position: center left;
}

.checkbox,
.radio {
    width: 19px;
    height: 25px;
    padding: 0 5px 0 0;
    background: url(../images/checkbox.png) no-repeat;
    display: block;
    clear: left;
    float: left;
}
.radio {
    background: url(../images/radio.png) no-repeat;
}
.select {
    position: absolute;
    width: 158px;
    height: 21px;
    padding: 0 24px 0 8px;
    color: #fff;
    font: 12px/21px arial, sans-serif;
    background: url(../images/select.png) no-repeat;
    overflow: hidden;
}

/* CUSTOM FONT */
@font-face {
    font-family: "EfonRegular";
    src: url("font/EFON-webfont.eot");
    src: local("EfonRegular"), url("font/EFON-webfont.woff") format("woff"), url("font/EFON-webfont.ttf") format("truetype"), url("http://imetin.pl/?404#webfont") format("svg");
    font-weight: normal;
    font-style: normal;
}

.newbutton {
    width: 150px;
    height: 35px;
    line-height: 35px;
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-family: helvetica, arial;
    font-weight: bold;
    display: block;
    text-align: center;
    position: relative;

    /* BACKGROUND GRADIENTS */
    background: #014464;
    background: -moz-linear-gradient(top, #0d658e, #0c577a 50%, #014d71 51%, #003e5c);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0e658e), color-stop(0.5, #0c577a), color-stop(0.5, #014d71), to(#003e5c));

    /* BORDER RADIUS */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    border: 1px solid #368dbe;
    border-top: 1px solid #c3d6df;

    /* TEXT SHADOW */

    text-shadow: 1px 1px 1px black;

    /* BOX SHADOW */
    -moz-box-shadow: 0 3px 4px black;
    -webkit-box-shadow: 0 3px 4px black;
    box-shadow: 0 3px 4px black;
}

/* WHILE HOVERED */
.newbutton:hover {
    background: #014464;
    background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(0.5, #0b5273), color-stop(0.51, #024869), to(#003853));
}

/* WHILE BEING CLICKED */
.newbutton:active {
    -moz-box-shadow: 0 3px 8px black;
    -webkit-box-shadow: 0 4px 9px black;
}
/* FONT GLYPH (MOSTLY FOR FUN) */
.newbutton:before {
    font-family: EfonRegular;
    content: "m";
    color: #09232f;
    font-size: 33px;
    float: left;
    margin-left: 15px;
    margin-right: -20px;
    text-shadow: 0 1px 0 #4190af;
}
table {
    font-size: 10.7px;
}

.table__items--header{
    font-weight: bold;
    background: #0482ff8a;
}

/* Tabela z zadaniami w profilu (id="v2") – bez obramowania, wiersze naprzemienne */
table#v2 {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

table#v2 td {
    border: none;
    padding: 4px 6px;
    vertical-align: middle;
}

/* Nagłówek tabeli */
table#v2 tr.table__items--header td {
    font-weight: bold;
    background-color: #006caa;
    color: #b2e3ff;
    text-shadow: 0 0 5px #000;
}

/* Wiersze naprzemienne (bez nagłówka) */
table#v2 tr:not(.table__items--header):nth-child(odd) td {
    background: rgba(0, 0, 0, 0.12);
}

table#v2 tr:not(.table__items--header):nth-child(even) td {
    background: rgba(4, 130, 255, 0.08);
}

/* Podświetlenie na hover */
table#v2 tr:not(.table__items--header):hover td {
    background: rgba(4, 130, 255, 0.20);
}


table#v2 .h1 {
    color: #b2e3ff;
    font-size: 14px;
    text-shadow: 0 0 5px #000;
    text-align: center;
    background-color: #006caa;
}

table#v2 .h2 {
    text-align: center;
    font-weight: normal;
    background-color: #b2e3ff;
}

table#v2 .h3 {
    text-align: center;
    font-weight: bold;
    background-color: #181818;
}

table#v2 .li {
    text-align: left;
    vertical-align: top;
}

table#v2 .bezramki {
    border: none;
}

.btn-cp-pay {
    xfloat: right;
    width: 100px;
    height: 30px;
    margin: 0;
    margin-left: 5px;
    xpadding: 2px 0 3px;
    overflow: hidden;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    background: url(../images/btn-pay.gif) no-repeat;
    border: none;
    cursor: pointer;
    color: #0093d0;
}
.btn-cp-pay-disabled {
    color: #fff;
    background-position: 0 -30px;
    cursor: auto;
}
input.btn-cp-pay:hover,
input.btn-cp-pay.hover {
    color: #fff;
    background-position: 0 -30px;
}
.styled-select {
    width: 240px;
    height: 34px;
    overflow: hidden;
    background: url(../images/new_arrow.jpg) no-repeat right #ddd;
    border: 1px solid #ccc;
}
.styled-select select {
    background: transparent;
    width: 268px;
    padding: 5px;
    border: 0;
    border-radius: 0;
    font-size: 16px;
    line-height: 1;
    height: 34px;
    -webkit-appearance: none;
}
.styled-select select:focus {
    outline: none;
}

input.styled{
    display: inherit !important;
}
.ipsImage{
	height:100%;
	width:100%;
}
a.btn,
button.btn,
button.btn-small,
button.btn-small-un {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 10px 0 4px;
  display: block;
  cursor: pointer;
  color: #fff;
  text-shadow: 0 0 3px #000;
  text-align: center;
  font: inherit;
  font-weight: normal;
}

/* Duży przycisk (jak input.btn) */
a.btn,
button.btn {
  height: 47px;
  width: 189px;
  line-height: 47px;
  background: url(../images/nui/button.png) no-repeat center top;
}
a.btn {
  text-decoration: none;
  display: inline-block;
}
a.btn:hover,
button.btn:hover { filter: brightness(125%); transition: 0.5s; }
a.btn:active,
button.btn:active { filter: contrast(1.2); }
a.btn:focus-visible,
button.btn:focus-visible { outline: 0; }

/* Mały przycisk (jak input.btn-small) – sprite + pozycje */
button.btn-small {
  height: 50px;
  width: 115px;
  line-height: 50px;        /* centrowanie tekstu pionowo */
  font-size: 17px;
  background: url(../images/www/misc/button_small.png);
  background-position: 0 -68px;
}
button.btn-small:hover  { background-position: 0 -7px; }
button.btn-small:active { color: #d7e2ea; background-position: 0 -125px; }

/* Mały nieaktywny (jak input.btn-small-un) – alternatywny sprite */
button.btn-small-un {
  height: 50px;
  width: 115px;
  line-height: 50px;
  font-size: 17px;
  background: url(../images/www/misc/button_small_unactive.png);
  background-position: 0 -68px;
}
button.btn-small-un:hover  { background-position: 0 -7px; }
button.btn-small-un:active { color: #d7e2ea; background-position: 0 -125px; }
/* =======================
   Panel admina – baza questów
   ======================= */

.quest-admin {
    margin-top: 8px;
}

/* Kontener z listą + scrollbar */
#questAdminPanel {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(4, 130, 255, 0.5);
    border-radius: 4px;
    max-height: 420px;
    overflow-y: auto;
}

/* Komunikaty (sukces / błąd) */
.quest-admin-messages {
    min-height: 18px;
    margin: 6px 0;
    font-size: 11px;
    color: #b2e3ff;
}

/* Tabela edycji questów */
.quest-admin-table {
    margin-top: 8px;
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.quest-admin-table td {
    padding: 4px 6px;
    vertical-align: middle;
}

/* Nagłówek tabeli */
.quest-admin-table tr.table__items--header td {
    background: #006caa;
    color: #b2e3ff;
    text-shadow: 0 0 5px #000;
    font-weight: bold;
}

/* Zebra, bez nagłówka */
.quest-admin-table tr:not(.table__items--header):nth-child(even) {
    background: rgba(4, 130, 255, 0.06);
}

.quest-admin-table tr:not(.table__items--header):nth-child(odd) {
    background: rgba(0, 0, 0, 0.12);
}

.quest-admin-table tr:not(.table__items--header):hover {
    background: rgba(4, 130, 255, 0.18);
}

/* SZEROKOŚCI KOLUMN:
   1) szName – szeroko
   2) szState – wąsko
   3) lValue – średnio
   4) Akcje – przyciski
*/
.quest-admin-table td:first-child {
    width: 270px;   /* Zadanie (szName) – szerzej */
}

.quest-admin-table td:nth-child(2) {
    width: 85px;    /* Stan (szState) – wąsko */
}

.quest-admin-table td:nth-child(3) {
    width: 80px;    /* Wartość (lValue) */
}

.quest-admin-table td:nth-child(4) {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

/* Inputy w tabeli – pełna szerokość komórki */
.quest-admin-table input.bar {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 4px;
    font-size: 11px;
}

/* Dodawanie nowego wpisu */
.quest-admin-add {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid #0c314f;
    font-size: 11px;
}

.quest-admin-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}

/* Pola w wierszu dodawania – nie na 100%, tylko kompaktowo */
.quest-admin-add-row input.bar {
    width: auto;
    min-width: 120px;
}

/* Bazowy wygląd małego przycisku panelu QA */
.btn-qa {
    border: 1px solid #0482ff;
    background: #01335a;
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    text-shadow: 0 0 3px #000;
    border-radius: 3px;
}

/* Małe, wąskie przyciski w tabeli i w wierszu dodawania */
.quest-admin-table input.btn-qa,
.quest-admin-add-row input.btn-qa {
    height: 20px;
    min-width: 52px;
    padding: 0 4px;
    margin: 0 2px;
    line-height: 18px;
}

/* Hover/active dla przycisków QA */
.btn-qa:hover {
    filter: brightness(120%);
}

.btn-qa:active {
    transform: translateY(1px);
}
/* Linia dla zadań bez bonusu – wyśrodkowana */
.quest-no-bonus-line {
    display: block;
    width: 160px;
    height: 2px;
    margin: 4px auto;         /* środek poziomo i trochę odstępu góra/dół */
    border: 0;
    background-color: gray;
}

/* ============================
   Contact – zakładki (nawigacja)
   ============================ */
.contact-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 4px 0;
}

.contact-nav-link {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.4);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    color: #ddd;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.contact-nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
}

.contact-nav-link.active {
    background: #ffcc33;
    color: #000;
    border-color: #ffcc33;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(255, 204, 51, 0.8);
}

/* ============================
   Contact – wiadomości w zgłoszeniu
   ============================ */
.ticket-msg {
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.45);
}

.ticket-msg-user {
    border-left: 3px solid #5cb85c;    /* gracz – zielona krawędź */
}

.ticket-msg-admin {
    border-left: 3px solid #e74c3c;    /* admin – pomarańczowa krawędź */
}

.ticket-msg-head {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ticket-msg-head strong {
    font-weight: 600;
}

.ticket-msg-date,
.ticket-msg-ip {
    font-style: italic;
}

.ticket-msg-body {
    font-size: 13px;
    line-height: 1.5;
}

/* delikatne podbicie tabeli zgłoszeń (jeśli używasz .user-data) */
.user-data tr:hover {
    background: rgba(255, 255, 255, 0.03);
}
.user-data tr.contact-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.user-data tr.contact-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.file-name{
  opacity: .75;
  margin-left: 8px;
  font-size: 12px;
}

.file-wrap{
  position:relative;
  display:inline-block;
  vertical-align:middle;
}

.file-btn{
  display:inline-block;
  padding:6px 10px;
  font-size:12px;
  line-height:1.2;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.file-btn:hover{
  background: rgba(255,255,255,.10);
}
.file-wrap input[type="file"]{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.file-name{
  opacity:.75;
  margin-left:8px;
  font-size:12px;
}

#cashbillChannels .cashbill-btn{
  /* równe i czytelne */
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;

  min-width: 220px;
  padding:10px 12px;

  /* jasne tło, żeby loga były widoczne */
  background:#fff !important;
  border:1px solid rgba(0,0,0,.23) !important;

  border-radius:8px;
  cursor:pointer;
  text-align:left;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
/* CashBill - kafelki kanałów (nie używa .btn) */
.cb-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* wygląd kafelka */
.cb-tile{
  /* równe i czytelne */
  justify-content:flex-start;

  min-width: 220px;
  max-width: 220px;
  
  
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.25);
  border-radius:10px;
  padding:10px 12px;
  min-height:52px;
  cursor:pointer;

  display:flex;
  align-items:center;
  gap:10px;

  text-shadow:none;
  line-height:1.2;
}

.cb-tile:hover{
  background:#f6f6f6;
  border-color:rgba(0,0,0,.35);
}

/* logo większe i wyraźniejsze */
.cb-logo{
  width:40px;
  height:40px;
  object-fit:contain;

  background:#fff;
  border-radius:10px;
  padding:4px;

  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 1px 2px rgba(0,0,0,.20);
  filter: contrast(1.10) saturate(1.10) drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

/* tekst */
.cb-name{
  color:#111;
  font-weight:600;
}
/* =========================================================
   TOPUP - radio packs (bez kolizji z innymi radio/label)
   Dotyczy TYLKO #topupPackList
   ========================================================= */
#topupPackList .topup-pack{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;

  justify-content:flex-start;

  background: rgba(8, 18, 28, 0.90);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.65);
}

#topupPackList .topup-pack:hover{
  background: rgba(8, 18, 28, 0.98);
  border-color: rgba(255,255,255,.28);
}

#topupPackList .topup-pack span,
#topupPackList .topup-pack b{
  color:#fff;
}

/* zaznaczony kafelek */
#topupPackList .topup-pack:has(input[type="radio"][name="topup_pack"]:checked){
  border-color: rgba(255,255,255,.55);
  background: rgba(10, 28, 44, 0.95);
}

/* siatka kafelków */
#topupPackList > div{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
}

/* RADIO */
#topupPackList input[type="radio"][name="topup_pack"]{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.75);
  background:transparent;
  display:inline-block;
  position:relative;
}

#topupPackList input[type="radio"][name="topup_pack"]:checked{
  border-color:#fff;
}

#topupPackList input[type="radio"][name="topup_pack"]:checked::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:#fff;
}
.paypal-button{
  width:450px;
  height:180px;
  border:0;
  background:transparent url("/images/misc/pp_button.png") center/contain no-repeat;
}
.paypal-button{
  width:450px;
  height:180px;
  border:0;
  padding:0;
  background:transparent url("/images/misc/pp_button.png") center/contain no-repeat;
  position:relative;
  cursor:pointer;
  border-radius:12px;         /* opcjonalnie, jak chcesz zaokrąglenie */
  overflow:hidden;            /* ważne dla overlay */
  transform: translateZ(0);   /* wygładza animacje */
}

/* overlay */
.paypal-button::before{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;            /* na hover robimy lekkie rozjaśnienie */
  opacity:0;
  transition: opacity .12s ease, background-color .12s ease;
  pointer-events:none;
}

/* podświetlenie na hover */
.paypal-button:hover::before{
  opacity:.10;                /* rozjaśnia o ~10% */
}

/* “wciśnięcie” + przyciemnienie na active */
.paypal-button:active{
  transform: scale(.99);
}
.paypal-button:active::before{
  background:#000;
  opacity:.18;                /* przyciemnia o ~18% */
}

/* focus z klawiatury */
.paypal-button:focus-visible{
  outline:2px solid rgba(255,255,255,.55);
  outline-offset:4px;
}

/* disabled */
.paypal-button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.paypal-button:disabled::before{
  opacity:0 !important;
}

/* ============================================================================
   Klasy pomocnicze dla stron publicznych (site)
   ============================================================================ */

/* Odstępy dolne */
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }

/* Odstępy górne */
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }

/* Padding */
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }

/* Flex layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-gap-5 { gap: 5px; }
.flex-gap-10 { gap: 10px; }
.flex-gap-15 { gap: 15px; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

/* Width utilities */
.w-100 { width: 100%; }
.w-50 { width: 50%; }
.w-auto { width: auto; }
.max-w-300 { max-width: 300px; }
.max-w-500 { max-width: 500px; }
.max-w-800 { max-width: 800px; }

/* Text utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.font-sm { font-size: 11px; }
.font-md { font-size: 13px; }
.font-lg { font-size: 15px; }
.font-bold { font-weight: bold; }

/* Colors */
.color-gray { color: #999; }
.color-green { color: #89b88d; }
.color-yellow { color: #ffc700; }
.color-red { color: #ff8080; }
.color-blue { color: #b2e3ff; }
.color-white { color: #fff; }

/* Background colors */
.bg-dark { background: rgba(0, 0, 0, 0.35); }
.bg-dark-blue { background: #1a3a52; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-wrap { word-wrap: break-word; white-space: normal; }

/* Display */
.inline { display: inline; }
.inline-block { display: inline-block; }
.block { display: block; }
.none { display: none; }

/* Pozycjonowanie */
.relative { position: relative; }
.absolute { position: absolute; }
.float-right { float: right; }
.float-left { float: left; }
.clear { clear: both; }

/* Border */
.border-left-yellow { border-left: 4px solid #ffc700; }
.border-left-red { border-left: 4px solid #ff8080; }
.border-left-green { border-left: 4px solid #89b88d; }
.border-radius-5 { border-radius: 5px; }

/* Info box (używany w panel, contact, policy) */
.info-box {
    background: #1a3a52;
    padding: 12px;
    margin-bottom: 15px;
    border-left: 3px solid #ffc700;
    border-radius: 3px;
}

/* Error box */
.error-box {
    background: rgba(230, 76, 76, 0.18);
    padding: 12px;
    margin-bottom: 15px;
    border-left: 4px solid #ff8080;
    border-radius: 3px;
    color: #ff9999;
}

/* Success box */
.success-box {
    background: rgba(40, 167, 69, 0.18);
    padding: 12px;
    margin-bottom: 15px;
    border-left: 4px solid #89b88d;
    border-radius: 3px;
    color: #89b88d;
}

/* Badge statusu */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}
.badge-active {
    background: #89b88d;
    color: #000;
}
.badge-inactive {
    background: #999;
    color: #fff;
}
.badge-pending {
    background: #ffc700;
    color: #000;
}
.badge-closed {
    background: #ff8080;
    color: #000;
}

/* Formularz stylizowany */
.form-row {
    margin-bottom: 15px;
}
.form-label {
    display: block;
    margin-bottom: 5px;
    color: #b2e3ff;
    font-size: 13px;
}

/* Tabela użytkownika (panel, datauser) */
.user-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}
.user-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.user-table td:first-child {
    font-weight: bold;
    color: #ffc700;
    width: 180px;
}

/* Lista itemów (używana w referral rewards) */
.item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.item-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.item-box img {
    width: 32px;
    height: 32px;
}

/* Contact ticket status */
.ticket-status {
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
}
.ticket-status.open {
    background: #89b88d;
    color: #000;
}
.ticket-status.closed {
    background: #999;
    color: #fff;
}
.ticket-status.pending {
    background: #ffc700;
    color: #000;
}

/* Character repair status */
.repair-status {
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.repair-status.success {
    background: rgba(40, 167, 69, 0.18);
    border-left: 4px solid #89b88d;
    color: #89b88d;
}
.repair-status.error {
    background: rgba(230, 76, 76, 0.18);
    border-left: 4px solid #ff8080;
    color: #ff9999;
}
.repair-status.info {
    background: rgba(4, 130, 255, 0.18);
    border-left: 4px solid #0482ff;
    color: #b2e3ff;
}

/* Lista zgłoszeń contact */
.contact-list {
    margin-top: 15px;
}
.contact-item {
    background: rgba(0, 0, 0, 0.35);
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}
.contact-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.contact-item.status-open {
    border-left-color: #89b88d;
}
.contact-item.status-closed {
    border-left-color: #999;
}
.contact-item.status-pending {
    border-left-color: #ffc700;
}

/* Wiadomości w zgłoszeniu */
.message-thread {
    margin-top: 15px;
}
.message-item {
    background: rgba(0, 0, 0, 0.45);
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 4px;
}
.message-item.user-message {
    border-left: 3px solid #89b88d;
}
.message-item.admin-message {
    border-left: 3px solid #ff8080;
}
.message-header {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 5px;
}
.message-body {
    font-size: 13px;
    line-height: 1.5;
}

/* Paypal payment form */
.payment-form {
    background: rgba(0, 0, 0, 0.35);
    padding: 20px;
    border-radius: 5px;
    margin-top: 15px;
}

/* Policy/regulamin formatting */
.policy-content {
    line-height: 1.8;
}
.policy-content h3 {
    color: #ffc700;
    margin-top: 20px;
    margin-bottom: 10px;
}
.policy-content p {
    margin-bottom: 15px;
}
.policy-content ul,
.policy-content ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

/* Referral link box */
.referral-box {
    background: #1a3a52;
    padding: 15px;
    border-radius: 5px;
    margin: 15px 0;
    border-left: 4px solid #ffc700;
}
.referral-link {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 3px;
    font-family: monospace;
    word-break: break-all;
    margin-top: 8px;
    color: #89b88d;
}

/* Security settings */
.security-section {
    margin-bottom: 25px;
}
.security-section h3 {
    color: #ffc700;
    margin-bottom: 10px;
}

/* Stats box (używany w panel) */
.stats-box {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    flex-wrap: wrap;
}
.stat-item {
    flex: 1;
    min-width: 150px;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 4px;
    text-align: center;
}
.stat-label {
    font-size: 11px;
    color: #999;
    margin-bottom: 5px;
}
.stat-value {
    font-size: 20px;
    font-weight: bold;
    color: #ffc700;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .flex-col-mobile { flex-direction: column; }
    .w-100-mobile { width: 100%; }
}

/* Site-specific utility classes */
.float-left {
    float: left;
}
.form-inline {
    display: inline;
}
.cursor-pointer {
    cursor: pointer;
}
.w-220 {
    width: 220px;
}
.mt-6 {
    margin-top: 6px;
}
.mt-8 {
    margin-top: 8px;
}
.mb-6 {
    margin-bottom: 6px;
}
.mb-8 {
    margin-bottom: 8px;
}

/* Text colors */
.text-error {
    color: #ff8080;
}
.text-success {
    color: #8cff8c;
}

/* Instructions and lists */
.instructions-list {
    padding-left: 18px;
}

/* Contact forms */
.contact-message {
    width: 400px;
    height: 200px;
}
.contact-reply {
    width: 450px;
    height: 200px;
}

/* Payment page */
.payment-section {
    margin: 14px 0 8px;
}
.payment-label {
    font-weight: bold;
    margin-bottom: 6px;
}
.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pack-list-section {
    margin: 10px 0 12px;
}
.payment-box {
    margin-top: 10px;
}

/* Download page */
.download-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.download-title {
    font-weight: 700;
    margin-bottom: 6px;
}

/* Guild page */
.guild-logo {
    max-width: 130px;
    max-height: 130px;
}
.guild-desc {
    width: 400px;
    height: 200px;
}
.guild-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* News page */
.news-date {
    float: right;
    font-size: 11px;
    opacity: 0.75;
    line-height: 22px;
}
.clear-both {
    clear: both;
}
.news-pager {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}
.page-info {
    opacity: 0.75;
}

/* Profile page */
.text-green {
    color: #2ecc71 !important;
}
.text-red {
    color: #e74c3c !important;
}
.profile-label {
    font-size: 12px;
}
.profile-value {
    font-size: 20px;
    color: #027acd;
}
.profile-no-border {
    border: 0px solid #99CCFF;
}
.quest-not-started {
    color: gray;
}
.quest-done {
    color: green;
}
.quest-skipped {
    color: red;
}
.quest-progress {
    color: #027acd;
}

/* Ranking page */
.rank-first {
    font-size: 130%;
    line-height: 30px;
    background-color: #0482ff8a;
}

/* Recovery page */
.recovery-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* === Payment method buttons === */
.payment-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}
.pay-method-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: flex;
    justify-content: center;
}
.pay-method-btn:hover {
    transform: scale(1.05);
}
.pay-method-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.pay-method-btn:disabled:hover {
    transform: none;
}
.pay-method-btn img {
    height: 120px;
    max-width: 100%;
}

/* === Additional utility classes === */

/* Hidden */
.hidden {
    display: none !important;
}

/* Margins */
.mt-12 {
    margin-top: 12px;
}

/* === Equipment List (historia zakupów, profil) === */
.equipment-list {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.equipment-list thead {
    background: rgba(4, 130, 255, 0.2);
}
.equipment-list th {
    padding: 10px 12px;
    text-align: left;
    color: #b2e3ff;
    font-weight: bold;
    font-size: 12px;
}
.equipment-list .th-icon {
    width: 50px;
    text-align: center;
}
.equipment-list .th-name {
    text-align: left;
}
.equipment-list .th-count {
    width: 80px;
    text-align: center;
}
.equipment-list td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    vertical-align: middle;
}
.equipment-list tbody tr {
    cursor: default;
    display: table-row;
    width: auto;
    min-height: auto;
    max-height: none;
    background-image: none;
}
.equipment-list tbody tr.tooltip-item {
    display: table-row;
    width: auto;
    min-height: auto;
    max-height: none;
    background-image: none;
}
.equipment-list tr:hover {
    background: rgba(4, 130, 255, 0.15);
}
.equipment-list .item-icon {
    width: 50px;
    text-align: center;
    padding: 4px;
}
.equipment-list .item-icon img {
    display: block;
    margin: 0 auto;
    max-width: 32px;
    max-height: 32px;
}
.equipment-list .item-name {
    color: #ffc700;
    font-weight: bold;
}
.equipment-list .item-count {
    text-align: center;
    color: #89b88d;
}

/* Tabela .table (historia płatności) */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.table th {
    padding: 10px 12px;
    text-align: left;
    background: rgba(4, 130, 255, 0.2);
    color: #b2e3ff;
    font-weight: bold;
    font-size: 12px;
}
.table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    vertical-align: middle;
}
.table tbody tr:nth-child(odd) {
    background: rgba(0, 0, 0, 0.12);
}
.table tbody tr:nth-child(even) {
    background: rgba(4, 130, 255, 0.08);
}
.table tbody tr:hover {
    background: rgba(4, 130, 255, 0.20);
}

/* Tabs (zakładki) */
.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

/* Klikalny wiersz */
.clickable {
    cursor: pointer;
}

/* Social icons */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    margin: 5px auto 0 auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.social-icons a {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.social-icons a:hover {
    transform: scale(1.1);
    opacity: 0.8;
}
.social-icons img {
    width: 22px;
    height: 22px;
    border-radius: 7px;
}

/* ============================================================================
   Kalendarz eventow dla graczy
   ============================================================================ */

/* Nadchodzace eventy */
.event-upcoming { margin-bottom: 25px; }
.event-upcoming h3 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.event-empty {
    text-align: center;
    color: rgba(178,227,255,0.5);
    padding: 20px;
}
.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}
.event-item.event-active {
    background: rgba(46,204,113,0.1);
    border-color: rgba(46,204,113,0.3);
}
.event-color {
    width: 6px;
    height: 40px;
    border-radius: 3px;
    flex-shrink: 0;
}
.event-info { flex: 1; }
.event-name {
    font-weight: bold;
    color: #fff;
    margin-bottom: 3px;
}
.event-date {
    font-size: 11px;
    color: rgba(178,227,255,0.7);
}
.event-desc {
    font-size: 10px;
    color: rgba(178,227,255,0.5);
    margin-top: 4px;
}
.event-status {
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}
.event-status.event-active {
    background: rgba(46,204,113,0.2);
    color: #2ecc71;
}
.event-status.event-scheduled {
    background: rgba(52,152,219,0.2);
    color: #3498db;
}

/* Kalendarz */
.event-calendar-wrap h3 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.event-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.event-calendar-header span {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}
.btn-calendar {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    color: #b2e3ff;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.btn-calendar:hover {
    background: rgba(4,130,255,0.2);
    border-color: rgba(4,130,255,0.4);
}
.event-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 8px;
}
.cal-header {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: rgba(178,227,255,0.6);
    padding: 8px 4px;
    text-transform: uppercase;
}
.cal-day {
    min-height: 60px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 4px;
    font-size: 11px;
}
.cal-day.other-month {
    opacity: 0.3;
}
.cal-day.today {
    background: rgba(4,130,255,0.2);
    border: 1px solid rgba(4,130,255,0.4);
}
.cal-day .day-num {
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}
.cal-day .day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cal-event {
    font-size: 9px;
    padding: 2px 4px;
    border-radius: 3px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

/* ============================================================================
 * Promo codes / Redeem
 * ========================================================================= */
.promo-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}
.promo-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
}
.promo-item-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.promo-item-name {
    flex: 1;
    font-weight: 500;
}
.promo-item-count {
    font-weight: bold;
    color: #ffc700;
}
.btn-lg {
    padding: 12px 30px;
    font-size: 1.1em;
}