/* ============================================= */
/* RWD FIX - FINAL (emotikony ukryte + fix poziomego scrolla) */
/* ============================================= */

@media (max-width: 768px) {
    /* Podstawowe stackowanie formularza */
    form > table.tborder {
        width: 100% !important;
        box-sizing: border-box !important;
    }
   
    form > table.tborder tr {
        display: block !important;
        margin-bottom: 16px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius) !important;
        overflow: hidden !important;
    }
   
    form > table.tborder td {
        display: block !important;
        width: 100% !important;
        padding: 12px !important;
        border: none !important;
        border-bottom: 1px solid #eee !important;
        box-sizing: border-box !important;
    }
   
    form > table.tborder td:last-child {
        border-bottom: none !important;
    }

    /* Label "Wiadomość:" */
    form > table.tborder td.trow2:first-child {
        background: var(--container) !important;
        padding: 10px 12px !important;
        font-weight: bold !important;
    }

    /* Inputy, select, textarea */
    input.textbox,
    select,
    textarea {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    textarea {
        min-height: 180px !important;
    }

    /* Toolbar edytora (ten szary pasek z ikonami) */
    #message ~ div,               /* często toolbar jest zaraz po textarea */
    .message-editor-toolbar,
    div[id*="editor"] {
        width: 100% !important;
        overflow-x: auto !important;   /* jeśli toolbar jest szeroki - pozwól scroll w poziomie tylko w nim */
        white-space: nowrap !important;
        padding: 8px 0 !important;
    }

    /* Górne ikony posta */
    table.tborder table {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }

    /* Ukrywanie panelu emotikonów (z Twojej struktury HTML) */
    div[style*="width:170px"],
    div[style*="margin:auto"][style*="170px"],
    table.tborder table.tborder,
    td.trow2 > div > table.tborder,
    td[valign="top"] table.tborder:has(td.thead) {
        display: none !important;
    }

    /* Buttony na dole */
    div[style*="text-align:center"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }
   
    .button {
        width: 100% !important;
        padding: 13px !important;
        font-size: 15px !important;
    }
}

/* Bardzo ważne – globalny fix poziomego scrolla */
@media (max-width: 768px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    * {
        box-sizing: border-box !important;   /* wszystkie elementy */
    }
}

/* Bardzo mały ekran */
@media (max-width: 480px) {
    form > table.tborder td {
        padding: 10px !important;
    }
    textarea {
        min-height: 160px !important;
    }
}

/* KONIEC RWD */







@media (max-width: 768px) {
  .thread-stats {
    display: none !important;
  }
}

.threadlist
{
	position:relative;
	display: flex;
  	flex-flow: column;
 	margin-top: 10px;
}

.threadlist .forumname
{
position: relative;
  display: flex;
  font-weight: 600;
  font-size: 24px;
  border-bottom: 1px solid var(--border-color);
  margin: 10px 0px;
}

.thread-container
{
	display:flex;
	position:relative;
	flex-flow:column;
}

.display-thread{
  display: flex;
  position: relative;
  height: 100px;
  align-items: center;
  box-sizing: border-box;
	padding: 15px;
	margin-top: 5px;
}

.display-thread .thread-information
{
  display: flex;
align-items: center;
	flex: 1 1 auto; 
  gap: 20px;
}

.thread-information .thread-basic-info
{
	position:relative;
	display:flex;
	flex-flow:column;
}

.thread-information .thread-basic-info span:nth-child(2)
{
	color:var(--text-secondary);
}

.thread-stats-2 span:nth-child(2) { color:var(--text-secondary); } 

.thread-information .thread-pages
{
	display:flex;
	gap:5px;
}

.thread-information .thread-pages a
{
  width: 20px;
  height: 20px;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--accent-color);
	box-shadow: 0px 0px 0px 0px rgb(66, 68, 90);
  transition: 0.1s ease-in-out all;
}
.thread-information .thread-pages a:hover
{
	color:var(--text-color);
box-shadow: 3px 2px 0px 1px var(--accent-color-darken);

}

.thread-lastpost
{
display: flex;
  gap: 2px;
  width: 300px;
  justify-content: end;
  padding-right: 10px;
}

.thread-lastpost .thread-lastpost-1
{
display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 15px;
}

.thread-lastpost .last-post-date
{
	font-size:10px;
	color:var(--text-secondary);
}

.display-thread .thread-information .thread-title
{
  font-size: 16px;
  font-weight: 600;
}


.display-thread .thread-stats {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
}

.display-thread .thread-stats-2
{
  position:relative;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.thread-rules
{
position: relative;
  display: flex;
  flex-flow: column;
  padding: 0px 20px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.thread-rules h1:after
{
content: "";
  background: var(--accent-color);
  height: 2px;
  position: relative;
top: -60px;
  width: 12%;
  display: block;
  opacity: 1;
  transition: 0.1s ease-in-out all;
}


.nothreads
{
margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.nothreads span{
	font-size: 62px;
	  color: #5138ee;
}

.forumdisplay-subforums .forum-item
{
	background: var(--container);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
	margin-bottom:10px;
	min-height:110px;
}

.forumdisplay-subforums .forum-item:after
{
	display:none;
}
.dropdown-sort-item {
	display:flex;
	gap:10px;
	align-items:center;
}
.dropdown-sort-item a
{
	padding:10px;
	box-sizing:border-box;
	background:var(--accent-color);
}
		

.dropdown-sort a { width:100%; display: flex; justify-content: center;}
.dropdown-sort a button {width: 95%}
		
		
		
		
		.showthread{
	position:relative;
	display: flex;
	flex-flow: column;
}

.post
{
	position:relative;
	display: flex;
	  margin-bottom: 10px;
	gap: 5px;
}

.post .post_author
{
display: flex;
  flex-flow: column;
  min-width: 300px;
  align-items: start;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
border: 1px solid var(--border-color);
  border-radius: 5px;
  background: var(--container);
}

.post_content
{
	width: 100%;
	padding: 20px !important;
	border-radius:var(--radius2);
}

.post .post_author div.author_avatar img
{
	border: none !important;
	background: none !important;
	border-radius: 100%;
		width:75px;
	height:75px;
}
.author_avatar_container img{	border-radius: 100%;
		width:75px;
	height:75px;}

.post_user_online
{
color: #6cff6c;
  position: absolute;
  background: var(--container);
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  bottom: 5px;
  font-size: 12px;
  left: 60px;
}
.post_user_offline
{
color: #ff6c6c;
  position: absolute;
  background: var(--container);
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  bottom: 5px;
  font-size: 12px;
  left: 60px;
}
.author_information
{
display: flex;
  align-items: center;
  position: relative;
}

.author_info
{
display: flex;
	position:relative;
  flex-flow: column;
	align-items: start;
	gap: 5px;
}
.author_avatar_container
{
display: flex;
  justify-content: center;
  align-items: center;
}

.author_avatar_container a
{
	position:relative;
	
}




/* Zastosuj to do wszystkich kontenerów ikon statystyk */
.icon_col_post, .icon_col_thread, .icon_col_join, .icon_col_rep {
    display: flex !important;
    align-items: center !important;    /* Centrowanie pionowe */
    justify-content: center !important; /* Centrowanie poziome */
}

/* Dodatkowo warto upewnić się, że sama ikona nie ma wymuszonych marginesów */
.icon-box i {
    margin: 0 !important;
    line-height: 1 !important;
    display: block !important;
}





.author_statistics
{
position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
	width:100%;
	box-sizing: border-box;
	padding:5px;
}
.post_user_stats
{
position: relative;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: var(--text-secondary);
background: #ffffff0a;
}

.author_statistics_2
{
	display: flex !important;
  flex-flow: column !important;
}

.post_author_icon
{
	width:35px !important;
	height:35px !important;
}

.icon_col_post
{
background: #a7db494f !important;
  color: #dbff5b !important;
  border: none !important;
}
.icon_col_thread
{
background: #db94494f !important;
  color: #ff995b !important;
  border: none !important;
}
.icon_col_join
{
background: #49b2db4f !important;
  color: #5bb2ff !important;
  border: none !important;
}
.icon_col_rep
{
background: #54db494f !important;
  color: #7fff5b !important;
  border: none !important;
}
.post .post_head
{
	font-size:12px;
	margin-top:5px;
	border:none !important;
}
.post .post_head span.post_date {
color: var(--text-secondary);
  padding: 4px;
  box-sizing: border-box;
  border-radius: 5px;
  background: var(--background);
  font-size: 13px;
}

.post_head strong a 
{
color: var(--text-secondary);
}

/* Przyciski w postach - Nowoczesny Orange Glow */
.postbit_buttons > a,
.postbit_buttons > a:link,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.1) 0%, rgba(255, 102, 0, 0.05) 100%) !important;
    border: 1px solid rgba(255, 102, 0, 0.5) !important;
    color: #ffffff !important;
    padding: 8px 15px !important; /* Nieco szersze dla lepszego wyglądu */
    border-radius: 6px !important; /* Delikatnie zaokrąglone rogi */
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Efekt Hover - Główny Glow */
.postbit_buttons > a:hover {
    background: rgba(255, 102, 0, 0.2) !important;
    border-color: #ff6600 !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.4); /* Pomarańczowa poświata */
    transform: translateY(-2px); /* Lekkie uniesienie */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* Efekt kliknięcia */
.postbit_buttons > a:active {
    transform: translateY(0px) scale(0.96);
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.6);
}

/* Opcjonalnie: Dodanie ikonkom wewnątrz przycisków koloru (jeśli ich używasz) */
.postbit_buttons > a i {
    color: #ff6600;
    transition: color 0.3s;
}

.postbit_buttons > a:hover i {
    color: #ffffff;
}

.trow_selected, tr.trow_selected td
{
	background:none !important;
	box-shadow: 0px 0px 0px 1px rgba(249, 194, 64, 0.8), 0px 0px 0px 5px rgba(249, 203, 64, 0.2) !important;
  border-radius: var(--radius);
	color:var(--text-color);
}
.codeblock
{
	background: none;
	border: 1px solid var(--border-color);
  padding: 10px;
}
.codeblock .title
{
	border-bottom: 1px solid var(--border-color);
}
.mycode_quote
{
	background: none;
	border: 1px solid var(--border-color);
  padding: 10px;
}
blockquote cite
{
border-bottom: 1px solid var(--border-color);
}

.showthread-information{ margin-bottom:10px; }

.showthread-information h1
{
	margin:0;
}
.showthread-information h4
{
	margin:0;
}
.showthread-information p
{
	margin:0;
	font-size:12px;
	color:var(--text-secondary);
}

.showthread-author
{
display: flex;
  align-items: center;
  gap: 10px;
	border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.showthread-avatar img{
	width:45px;
	height:45px;
	border-radius:100%;
}
	
/* XEM FAST REP */
.xem-fast-rep-container
{
position: relative;
  display: flex;
  margin-bottom: 15px;
  align-items: end;
  justify-content: end;
}

#xem_fast_rep {
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, 0.03); /* Delikatne tło pod całą sekcją */
    padding: 10px 5px;
    border-radius: 10px;
}

.reps {
    display: flex;
    width: 32px;  /* Większe, żeby łatwiej było kliknąć */
    height: 32px;
    font-size: 18px;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

/* Przycisk PLUS - Neonowy zielony */
.plus {
    background: rgba(122, 245, 123, 0.05);
    color: #7bf583;
    border-color: rgba(123, 245, 131, 0.2);
}

.plus:hover {
    background: rgba(122, 245, 123, 0.2);
    border-color: #7bf583;
    box-shadow: 0 0 15px rgba(123, 245, 131, 0.25);
    transform: scale(1.1);
}

/* Przycisk MINUS - Neonowa czerwień */
.minus {
    background: rgba(245, 123, 123, 0.05);
    color: #f57b7b;
    border-color: rgba(245, 123, 123, 0.2);
}

.minus:hover {
    background: rgba(245, 123, 123, 0.2);
    border-color: #f57b7b;
    box-shadow: 0 0 15px rgba(245, 123, 123, 0.25);
    transform: scale(1.1);
}
/* Przycisk "Lubisz to" w kolorze neonowego pomarańczu */
.liked_this {
    background: rgba(255, 102, 0, 0.05) !important; /* Bardzo delikatne pomarańczowe tło */
    border: 1px solid rgba(255, 102, 0, 0.4) !important; /* Wyraźniejsza ramka */
    color: #FF6600 !important; /* Główny kolor tekstu */
    padding: 0 14px !important;
    height: 32px !important;
    display: flex !important;
	gap: 4px; /* To stworzy przerwę między "TY/" a nickiem */
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.25s ease-in-out !important;
    margin: 0 5px 0 0 !important; /* Odstęp od przycisków plus/minus */
}

/* Efekt poświaty po najechaniu */
.liked_this:hover {
    background: rgba(255, 102, 0, 0.15) !important;
    border-color: #FF6600 !important;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.3); /* Pomarańczowy glow */
    transform: translateY(-1px);
}


.positives {
background-color: #8af57b24;
  border: 1px solid #7bf583;
  color: #7ff57b;
}

.negatives {
background-color: #f57b7b24;
  border: 1px solid #f57b7b;
  color: #f57b7b;
}





.showthread .float_left{margin-bottom:10px;}
.float_right{margin-bottom:10px;}
	
.showthread-quickreply
{
	position: relative;
	display: flex;
	flex-flow: column;
}

.quickreply-content
{
	position: relative;
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.quickreply-avatar
{
	min-width: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: var(--container);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
}

.quickreply-avatar img
{
	width: 100px;
	height: 100px;
	border-radius: 100%;
}

.quickreply-textarea
{
	position: relative;
	flex-grow: 1;
	min-width: 200px;
}

.quickreply-textarea textarea
{
	width: 100% !important;
	box-sizing: border-box;
	min-height: 120px;
}

.quickreply-buttons
{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 5px;
	gap: 5px;
	flex-wrap: wrap;
}

.quickreply-buttons .button
{
	flex: 1;
	min-width: 100px;
}

/* RESPONSIVE - tablet */
@media (max-width: 1024px) {
	.quickreply-avatar
	{
		min-width: 250px;
	}
	
	.quickreply-avatar img
	{
		width: 90px;
		height: 90px;
	}
}

/* RESPONSIVE - mobile */
@media (max-width: 768px) {
	.quickreply-content
	{
		flex-direction: column;
	}
	
	.quickreply-avatar
	{
		min-width: auto;
		width: 100%;
		min-height: 120px;
	}
	
	.quickreply-avatar img
	{
		width: 80px;
		height: 80px;
	}
	
	.quickreply-textarea
	{
		min-width: auto;
		width: 100%;
	}
	
	.quickreply-textarea textarea
	{
		font-size: 16px;
		min-height: 150px;
	}
	
	.quickreply-buttons
	{
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
	.quickreply-buttons .button
	{
		flex: 1;
		min-width: 45%;
	}
}

/* RESPONSIVE - mały telefon */
@media (max-width: 480px) {
	.quickreply-avatar
	{
		min-width: auto;
		width: 100%;
		min-height: 100px;
	}
	
	.quickreply-avatar img
	{
		width: 70px;
		height: 70px;
	}
	
	.quickreply-textarea textarea
	{
		font-size: 16px;
		min-height: 120px;
		padding: 10px !important;
	}
	
	.quickreply-buttons .button
	{
		flex: 1 1 calc(50% - 3px);
		min-width: auto;
		padding: 10px;
	}
}