* {
box-sizing: border-box;
word-break: break-word;
}

html {
scroll-behavior: smooth;
}

#logo-mobile {
display: none;
}

#logo-desktop {
display: block;
}

.review-skeleton {
border: 1px solid #eee;
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
animation: pulse 1.5s infinite;
}

.skeleton-box {
width: 48px;
height: 48px;
background: #e0e0e0;
border-radius: 8px;
margin-bottom: 8px;
}

.skeleton-line {
height: 12px;
background: #e0e0e0;
margin: 6px 0;
border-radius: 4px;
}
.skeleton-line.short {
width: 40%;
}
.skeleton-line:not(.short) {
width: 90%;
}

@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}


@font-face {
font-family: 'Plus Jakarta Sans';
src: url('https://www.mytopstock.com/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
font-weight: 200 800; 
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Plus Jakarta Sans';
src: url('https://www.mytopstock.com/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
font-weight: 200 800; 
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url('https://www.mytopstock.com/fonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2') format('woff2');
}

#reviews {
padding-top: 20px;
}



.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

.gold-icon .material-symbols-outlined {
font-size: 20px;
background: linear-gradient(to right, #C9A227, #B8860B, #A67C00, #C9A227);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 10px;
position: relative;
top: 5px;
}


body {
padding: 0px;
margin: 0px;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: normal;
color: #4d4d4c;
background-color: #FFFFFF;
display:flex; 
flex-direction:column; 
height:100vh;
overflow-x: hidden;
}

.page {
max-width:960px;
margin: auto;
padding: 0px 20px;
}

header {
width: 100%;
margin: 0px;
padding: 0px;
display: table;
position: fixed;
top: 0;
z-index: 1;
border-bottom: 1px solid #CCCCCC;
box-shadow: 0px 1px 2px #CCCCCC;
background-color: #FFFFFF;
}

header a {
display: inline-block;
}

header .button {
display: inline-block;
margin-left: 10px;
margin-top: 2px;
padding: 10px;
}

footer {
margin-top: auto;
border-top: 1px solid #000000;
background-color: #4d4d4c;
padding: 20px 0px;
}

footer #logo {
margin: 10px 0px;
}

footer p {
padding: 0px;
margin: 20px 0px;
font-size: 14px;
line-height: 24px;
text-align: left;
color: #FFFFFF;
}

footer a {
display: inline-block;
font-size: 14px;
line-height: 24px;
margin-right: 20px;
}

footer a:hover {
color: #f28d32;
text-decoration: underline;
}

a {
color: #f28d32;
text-decoration: none;
}

a:hover {
color: #4d4d4c;
}


.link {
color: #f28d32;
text-decoration: none;
}

.link:hover {
color: #4d4d4c;
}

button#openPopup {
color: #FFFFFF;
text-decoration: none;
background-color: #f28d32;
padding: 10px 20px;
border-radius: 8px;
display: table;
transition: background-color 0.5s;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
border: none;
cursor: pointer;
}

button#openPopup:hover {
background-color: #4d4d4c;
color: #FFFFFF;
}

.button {
color: #FFFFFF;
text-decoration: none;
background-color: #f28d32;
padding: 10px 20px;
border-radius: 8px;
display: table;
transition: background-color 0.5s;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
border: none;
cursor: pointer;
}

.button:hover {
background-color: #4d4d4c;
color: #FFFFFF;
}

.buttongold {
color: #FFFFFF;
background-color: #E8C547; /* fallback solid color */
text-decoration: none;
padding: 10px 15px 10px 15px;
border-radius: 8px;
display: inline-block;
transition: background-color 0.5s;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
border: none;
cursor: pointer;
}

.buttongold:hover {
background: #4d4d4c;
color: #FFFFFF;
}

.buttongoldlogin {
color: #FFFFFF;
background-color: #E8C547; /* fallback solid color */
text-decoration: none;
padding: 4px 15px 10px 15px;
border-radius: 8px;
display: inline-block;
transition: background-color 0.5s;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
border: none;
cursor: pointer;
}

.buttongoldlogin:hover {
background: #4d4d4c;
color: #FFFFFF;
}

.buttongoldlogin .material-symbols-outlined {
position: relative;
top: 7px;
}


#cancelSubBtn.button, #deleteAccountBtn.button {
color: #FFFFFF;
background-color: #E63946;
}

#cancelSubBtn.button:hover, #deleteAccountBtn.button:hover {
background-color: #4d4d4c;
color: #FFFFFF;
}

#subscribeBtn.button {
color: #FFFFFF;
background-color: #28A745;
}

#subscribeBtn.button:hover {
background-color: #4d4d4c;
color: #FFFFFF;
}

header #logo {
float: left;
padding: 18px 0px 10px 0px;
}

header #nav {
float: right;
padding: 12px 0px;
}

#search {
float: left;
padding: 14px 0px;
margin-left: 180px;
}

#search button {
border: none;
background: none;
}

section {
width: 100%;
margin: 0px;
padding: 25px 0px 50px 0px;
display: table;
}

#banner {
background-image: url(https://www.mytopstock.com/MyTopStock-images/MyTopStock-banner.jpg);
background-color: #FFFFFF;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
margin-top: 60px;
}

.color-black {
color: #4d4d4c;
}

h1 {
padding: 0px;
margin: 10px 0px;
font-size: 40px;
line-height: 50px;
font-weight: 600;
text-align: left;
color: #f28d32;
}

h2 {
padding: 0px;
margin: 10px 0px;
font-size: 30px;
line-height: 40px;
font-weight: 600;
text-align: left;
color: #f28d32;
}

#stock_vote_home h2, #top-gold-members h2, #stock-market-news h2 {
margin-bottom: 20px;
}

h3 {
padding: 0px;
margin: 10px 0px;
font-size: 20px;
line-height: 30px;
font-weight: 600;
text-align: left;
color: #000000;
}

h4 {
padding: 0px;
margin: 10px 0px;
font-size: 16px;
line-height: 24px;
font-weight: 600;
text-align: left;
color: #f28d32;
}

p {
padding: 0px;
margin: 10px 0px;
font-size: 20px;
line-height: 30px;
text-align: center;
}

#banner h1 {
margin: 50px 0px;
text-align: center;
text-shadow: 1px 1px 10px #FFFFFF;
}

.ColorBlack {
color: #000000;
}

.search-container {
position: relative;
width: 320px;
}

.search-container input {
width: 100%;
padding: 10px 40px 10px 15px;
border-radius: 25px;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
}

.search-container .material-symbols-outlined {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #555;
font-size: 22px;
transition: color 0.2s;
}

.search-container .material-symbols-outlined:hover {
color: #111;
}

.dropdown {
position: absolute;
top: 45px;
left: 0;
right: 0;
background: white;
border: 1px solid #ccc;
border-radius: 8px;
max-height: 150px;
overflow-y: auto;
display: none;
z-index: 1000;
}

.dropdown div {
padding: 10px;
cursor: pointer;
}

.dropdown div:hover {
background: #e5e7eb;
}

.ticker-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.ticker-box {
flex: 1 1 400px;
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.2s;
max-width: 452.5px;
}

.ticker-box:hover {
border: 1px solid #f28d32;
}

.ticker-icon {
display: inline-table;
position: relative;
vertical-align: top;
width: max-content;
}

.ticker-letter {
display: inline-table;
position: relative;
vertical-align: top;
padding: 0px 0px 0px 10px;
width: max-content;
max-width: 720px;
}

.ticker-reviews, .ticker-price, .ticker-vote {
display: inline-table;
margin: 0px;
width: 135px;
vertical-align: middle;
}

.ticker-price {
margin: 0px 5px;
}

.ticker-results {
text-align: center;
}

.ticker-letter h3 {
margin: 0px;
font-size: 20px;
line-height: 28px;
font-weight: 600;
text-align: left;
color: #000000;
}

.ticker-letter h4 {
margin: 0px;
font-size: 14px;
line-height: 20px;
font-weight: normal;
text-align: left;
color: #f28d32;
}

.ticker-box img {
border-radius: 50px;
width: 50px;
height: 50px;
border: 1px solid #CCCCCC;
display: block;
}

.ticker-info p {
padding: 0px;
margin: 15px 0px;
font-size: 14px;
line-height: 24px;
text-align: left;
}

.ticker-info {
margin: 15px 0px 0px 0px;
}

.ticker-info .material-symbols-outlined {
font-size: 20px;
line-height: 0px;
position: relative;
top: 4px;
margin: 0px 5px 0px 0px;
background-color: #E1F0FF;
display: inline;
border-radius: 8px;
padding: 1px 3px;
}

.ticker-reviews p, .ticker-price p, .ticker-vote p {
font-size: 12px;
line-height: 18px;
text-transform: uppercase;
margin: 5px 0px;
text-align: left;
}

.ticker-reviews .highlight, .ticker-price .highlight, .ticker-vote .highlight {
border: 1px solid #EEEEEE;
border-radius: 8px;
text-align: center;
padding: 15px 5px;
height: 50px;
color: #f28d32;
font-weight: bold;
}

.ticker-price .highlight {
font-size: 16px;
line-height: 18px;
}

.ticker-vote .highlight {
font-size: 16px;
line-height: 18px;
color: #FFFFFF;
}

.review-price .highlight {
font-size: 14px;
line-height: 16px;
}

.bggold {
border: 3px solid transparent;
border-image: linear-gradient(to right, #E8C547, #D4AF37, #B8860B, #E8C547) 1;
padding: 20px;
}

.bggold .all-likes {
font-size: 12px;
background: linear-gradient(to right, #C9A227, #B8860B, #A67C00, #C9A227);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 5px;
}

.bggold .badge {
margin-left: 5px;
}

.bggreen {
background-color: #28A745;
}

.bgred {
background-color: #E63946;
}

.bggrey {
background-color: #FFBE0B;
}

.ticker-link {
text-decoration: none;
color: inherit;
display: block;
}

.ticker-link:hover .ticker-box {
box-shadow: 0 0 10px rgba(0,0,0,0.2);
transform: scale(1.02);
transition: 0.2s ease;
}

#intro {
padding: 25px 0px 20px 0px;
}

#intro p {
font-size: 16px;
line-height: 24px;
}

#stock_vote {
padding: 0px 0px 0px 0px;
}

#stock_vote .ticker-box {
max-width: 100%;
border-radius: 0px;
box-shadow: none;
border-top: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
border-bottom: none;
border-radius: 8px 8px 0px 0px;
}

#stock_vote .ticker-info p {
display: inline-block;
width: 33%;
padding: 0px 20px 0px 0px;
vertical-align: top;
}

#stock_vote .ticker-results .ticker-reviews, #stock_vote .ticker-results .ticker-price, #stock_vote .ticker-results .ticker-vote {
width: 33%;
padding: 0px 20px 0px 0px;
margin: 0px;
}

#home_intro {
padding: 25px 0px;
}

#stock_vote_home .ticker-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

#stock_vote_home .sentiment-info {
font-size: 14px;
line-height: 20px;
padding: 5px 15px 7px 15px;
}

#stock_vote_home {
padding: 0px 0px 30px 0px;
}

#stock_vote_home .ticker-box {
border-radius: 0px;
box-shadow: none;
border: 1px solid #eeeeee;
border-radius: 8px;
display: block;
}

#stock_vote_home .ticker-box:hover {
border: 1px solid #f28d32;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
transform: scale(1.01);
transition: 0.2s ease;
}

#stock_vote_home a {
color: #4d4d4c;
}

#stock_vote_home .ticker-info p {
display: block;
width: 100%;
padding: 0px;
vertical-align: top;
}

#stock_vote_home .ticker-letter {
max-width: 240px;
}

#stock_vote_home .ticker-results .ticker-reviews, #stock_vote_home .ticker-results .ticker-price, #stock_vote_home .ticker-results .ticker-vote {
width: 33%;
padding: 0px 20px 0px 0px;
margin: 0px;
}

#widget {
padding: 0px 0px 20px 0px;
}

#widget iframe {
height: 300px !important;
}

#stock_vote_home iframe {
height: auto !important;
}

.review {
border-bottom: 1px solid #eee;
padding: 20px;
}
.review:last-child {
border-bottom: none;
}

.like-btn {
background: none;
border: none;
color: #f28d32;
cursor: pointer;
padding: 10px 3px 0px 3px;
}

.like-btn.liked {
color: #28a745;
}

.like-btn:hover {
color: #28a745;
}

.like-btn.material-symbols-outlined {
font-size: 20px;
line-height: 20px;
position: relative;
top: 4px;
}

.like-btn .material-symbols-outlined {
font-size: 20px;
line-height: 20px;
position: relative;
top: 4px;
}

.membership-upgrade .bggold {
margin: 20px 0px;
}

.membership-upgrade .review-info {
width: 740px;
}

.delete-btn {
background: none;
border: none;
color: #E63946;
cursor: pointer;
padding: 10px 20px 0px 20px;
margin-left: 10px;
}

.delete-btn:hover {
color: #4d4d4c;
}

.delete-btn.material-symbols-outlined {
font-size: 20px;
line-height: 20px;
position: relative;
top: 4px;
}



.review-box {
display: table;
width: 100%;
}

.review-info {
display: inline-block;
width: 780px;
}

.review-vote {
float: right;
display: block;
margin: 3px 0px;
}

.review-vote .highlight {
color: #FFFFFF;
text-decoration: none;
padding: 10px 20px;
border-radius: 50px;
display: table;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
border: none;
}

.review-info p {
font-size: 14px;
line-height: 20px;
margin: 0px;
text-align: left;
}

.review-price p {
font-size: 12px;
line-height: 18px;
text-transform: uppercase;
margin: 5px 0px;
text-align: left;
}

.review-vote p {
font-size: 12px;
line-height: 18px;
margin: 0px;
text-align: left;
}

.review-info .date {
font-size: 12px;
line-height: 18px;
}

.review-info .comments {
margin: 10px 0px;
}

label {
font-weight: 600;
}

input, textarea, select {
width: 100%;
padding: 10px;
border: 1px solid #eeeeee;
border-radius: 8px;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
}

textarea {
height: 120px;	
}

.vote-block input[type="radio"] {
-webkit-appearance: none; 
-moz-appearance: none;
appearance: none; 
width: 16px;
height: 16px;
border: none;
outline: none;
background: transparent;
margin: 0;
padding: 0;
position: absolute;
}

.vote-options {
display: flex;
gap: 10px;
margin-top: 5px;
margin-bottom: 10px;
}

.vote-block {
flex: 1;
text-align: center;
padding: 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 600;
background-color: #eeeeee;
text-transform: uppercase;
font-size: 14px;
line-height: 16px;
}

.vote-block:hover {
background-color: #eeeeee;
}

.vote-block[data-value="Buy"]:hover {
background: #28A745;
color: #FFFFFF;
}

.vote-block[data-value="Hold"]:hover {
background: #FFBE0B;
color: #FFFFFF;
}

.vote-block[data-value="Sell"]:hover {
background: #E63946;
color: #FFFFFF;
}

.vote-block[data-value="Buy"]:has(input[type="radio"]:checked){
background: #28A745;
color: #FFFFFF;
}

.vote-block[data-value="Hold"]:has(input[type="radio"]:checked){
background: #FFBE0B;
color: #FFFFFF;
}

.vote-block[data-value="Sell"]:has(input[type="radio"]:checked){
background: #E63946;
color: #FFFFFF;
}

.input-with-icon {
position: relative;
display: inline-block;
width: 100%;
}

.input-with-icon .material-symbols-outlined {
position: absolute;
left: 10px;
top: 55%;
transform: translateY(-50%);
font-size: 20px;
pointer-events: none;
}

.input-with-icon input {
padding: 10px 10px 8px 35px;
margin-top: 5px;
}

#reviewForm .button {
margin-top: 10px;
}

.reviewFormContainer {
display: flex;
gap: 100px; 
align-items: flex-start; 
}

.reviewFormPrice {
flex: 1; 
}

.reviewFormVote {
flex: 2; 
}

#reviewForm {
border: 1px solid #eee;
padding: 20px;
border-radius: 8px;
}

#review_text {
margin: 0px 0px 20px 0px;
}

.modal-content h4 {
color: #4d4d4c;
font-size: 24px;
line-height: 30px;
margin: 0px;
padding: 0px;
}

.modal-content p {
font-size: 14px;
line-height: 20px;
text-align: left;
margin: 10px 0px 10px 0px;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
z-index: 10;
animation: fadeIn 0.3s;
}

.modal-content {
background: #FFFFFF;
width: 90%;
max-width: 800px;
margin: 5% auto;
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
position: relative;
animation: slideIn 0.3s;
height: 90%;
max-height: max-content;
overflow-y: auto;
}

@keyframes fadeIn {
from {opacity:0;} to {opacity:1;}
}

@keyframes slideIn {
from {transform: translateY(-50px); opacity:0;} to {transform: translateY(0); opacity:1;}
}

.modal-content .message {
font-size: 12px;
line-height: 18px;
text-align: left;
margin: 1px 0px 3px 3px;
height: 18px;
color: #28A745;
}

.error {
color: #E63946 !important;
}

.modal-content input[type="checkbox"] {
width: 15px;
accent-color: #f28d32;
cursor: pointer;
position: relative;
top: 1px;
margin: 0px 5px 0px 0px;
}

.modal-content .checkbox-label {
font-size: 14px;
line-height: 20px;
text-align: left;
font-weight: normal;
}

.modal-content .checkbox-label a:hover {
text-decoration: underline;
color: #f28d32;
}

.forms-container {
display: flex;
justify-content: space-between;
gap: 0px;
flex-wrap: wrap;
}

#loginForm {
flex: 1;
padding-right: 20px;
border-right: 1px solid #eeeeee;
}

#signupForm {
flex: 1;
padding-left: 20px;
}

#loginMessage, #signupMessage {
font-size: 14px;
margin: 0px 0px 3px 3px;
line-height: 20px;
}

.article p {
font-size: 16px;
line-height: 24px;
text-align: left;
}

.article h2 {
font-size: 30px;
line-height: 40px;
text-align: left;
margin-bottom: 40px;
}

.article h3 {
font-size: 20px;
line-height: 26px;
text-align: left;
margin: 40px 0px 20px 0px;
}

.article h4 {
font-size: 16px;
line-height: 24px;
text-align: left;
margin: 30px 0px 10px 0px;
}

.article .material-symbols-outlined {
font-size: 20px;
top: 4px;
position: relative;
}

.user-info .material-symbols-outlined {
font-size: 24px;
top: 1px;
position: relative;
display: block;
}

.user-info .button {
padding: 10px 15px 10px 15px;
margin-left: 10px;
margin-top: 2px;
}

#contactForm input, #contactForm textarea, #contactForm select {
margin: 0px 0px 20px 0px;
}

#contactForm .button {
margin-top: 18px;
}

#account-page #reviewForm {
margin-top: 30px;
padding: 15px 20px 20px 20px;
}

#account-page .delete-account, #account-page .membership-upgrade {
margin-top: 30px;
padding: 15px 20px 20px 20px;
border: 1px solid #eee;
border-radius: 8px;
}

#account-page p {
font-size: 16px;
line-height: 24px;
text-align: left;
}

#account-page .review-info p {
font-size: 14px;
line-height: 20px;
margin: 0px;
text-align: left;
}

#account-page .review-info .date {
font-size: 12px;
line-height: 18px;
}

#account-page .review-info .like-btn {
font-size: 14px;
line-height: 20px;
}

#account-page .review-info .comments {
margin: 10px 0px;
}

#account-page h3 {
margin: 0px;
}

#account-page #usernameForm {
padding: 0px;
margin: 0px;
}

#membership-page {
padding: 25px 0px 80px 0px;
}

#membership-page #reviewForm {
margin-top: 30px;
padding: 15px 20px 20px 20px;
}

#membership-page p {
font-size: 16px;
line-height: 24px;
text-align: left;
}

#membership-page .review-info p {
font-size: 14px;
line-height: 20px;
margin: 0px;
text-align: left;
}

#membership-page .review-info .date {
font-size: 12px;
line-height: 18px;
}

#membership-page .review-info .like-btn {
font-size: 14px;
line-height: 20px;
}

#membership-page .review-info .comments {
margin: 10px 0px;
}

#membership-page h3 {
margin: 0px;
}

#membership-page h2 {
margin-bottom: 20px;
}

#membership-page #usernameForm {
padding: 0px;
margin: 0px;
}

#membership-page .user-info .button {
margin: 0px;
}

.delete-account .button, .membership-upgrade .button {
margin-top: 20px;
}

.pagination {
margin: 20px auto;
text-align: center;
}
.page-link {
display: inline-block;
padding: 6px 12px;
margin: 2px;
border: 1px solid #eeeeee;
border-radius: 4px;
color: #4d4d4c;
text-decoration: none;
min-width: 35px;
}
.page-link.active {
background: #f28d32;
color: #FFFFFF !important;
border-color: #f28d32;
}
.page-link:hover {
background: #f28d32;
color: #FFFFFF !important;
border-color: #f28d32;
}

.rss-news {
border: 1px solid #eee;
padding: 20px 20px 10px 20px;
border-radius: 8px;
list-style: none;
margin: 0px;
max-height: 400px;
overflow-y: auto;
}

.rss-news .date {
font-size: 14px;
line-height: 18px;
}

.rss-news li {
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}

.rss-news li:last-child {
border-bottom: none;
padding-bottom: 0px;
}

#stock-news {
padding: 20px 0px 20px 0px;
}

#stock-market-news {
padding: 10px 0px 80px 0px;
}

#stock-market-news .rss-news {
max-height: 100%;
}

.gold-leaderboard {
border: 1px solid #eee;
padding: 20px;
border-radius: 8px;
margin: 0px;
}

.gold-member {
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.gold-member:last-child {
border-bottom: none;
padding-bottom: 0px;
margin-bottom: 0px;
}

.ranking-username {
flex: 1;
text-align: left;
}

.ranking-number {
width: 40px;
display: inline-block;
}

.ranking-name {
background: linear-gradient(to right, #C9A227, #B8860B, #A67C00, #C9A227);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.ranking-likes {
flex: 1;
text-align: center;
font-size: 14px;
line-height: 20px;
color: #28A745;
}

.ranking-likes .material-symbols-outlined {
font-size: 20px;
line-height: 20px;
position: relative;
top: 4px;
color: #28A745;
margin-right: 5px;
}

.ranking-reviews {
flex: 1;
text-align: right;
font-size: 14px;
line-height: 20px;
}

#gifButton {
margin: -30px 0px 5px 15px !important;
padding: 5px 10px 0px 10px;
font-size: 20px;
line-height: 20px;
}

#gifButton .material-symbols-outlined {
font-size: 30px;
padding: 0px;
margin: 0px;
}

.login-hint {
margin: 0px 0px 10px 0px;
}

.gif-btn {
margin-top: 5px;
}

.gif-modal {
position: fixed;
z-index: 99999;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
display: none;
justify-content: center;
align-items: center;
}

.gif-modal-content {
background: white;
padding: 20px;
width: 90%;
max-width: 500px;
border-radius: 10px;
}

#gifSearch {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}

.gif-results {
max-height: 350px;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}

.gif-results img {
width: 100%;
border-radius: 6px;
cursor: pointer;
}

.close-gif-btn {
margin-top: 10px;
width: 100%;
}

.review .gif-review,
.bggold .gif-review {
max-width: 100%;
border-radius: 8px;
margin: 5px 0px;
display: block;
}


/* Popup background overlay */
.login-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.55);
justify-content: center;
align-items: center;
padding: 20px;
}

.login-modal-content {
background: #FFFFFF;
width: 100%;
max-width: 420px;
border-radius: 8px;
padding: 20px;
position: relative;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
animation: fadeIn 0.25s ease;
}

.login-modal-content h2 {
text-align: center;
margin: 0px 0px 20px 0px;
}

@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}

/* Close button */
.login-close {
position: absolute;
right: 12px;
top: 12px;
font-size: 24px;
cursor: pointer;
color: #4d4d4c;
}

.login-title {
text-align: center;
margin-bottom: 25px;
font-size: 22px;
font-weight: bold;
}

.login-btns {
display: flex;
flex-direction: column;
gap: 12px;
}

.btn.oauth-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 8px;
text-decoration: none;
color: #4d4d4c;
justify-content: center;
border: 1px solid #eeeeee;
cursor: pointer;
}

.btn.oauth-btn img {
width: 20px;
height: 20px;
}

.btn.oauth-btn:hover {
color: #f28d32;
}

.open-login-btn {
padding: 10px 18px;
border: none;
background: #333;
color: #fff;
border-radius: 6px;
cursor: pointer;
}




.close { position: absolute; top: 20px; right: 25px; font-size: 28px; cursor: pointer; transition: 0.3s; }
.close:hover { color: #ff416c; }


.popup form { width: 48%; display: flex; flex-direction: column; }
.popup form h2 { margin-bottom: 20px; color: #333; text-align: center; }

.popup form input { margin-bottom: 10px; padding: 12px; border-radius: 8px; border: 1px solid #ccc; transition: 0.3s; }
.popup form input:focus { border-color: #f28d32; outline: none; }

.popup form button { padding: 12px; border-radius: 50px; border: none; background: #ff4b2b; color: white; cursor: pointer; font-weight: bold; transition: 0.3s; margin-top: 10px; }
.popup form button:hover { background: #ff416c; }

.popup .message { font-size: 0.9em; margin-top: 5px; min-height: 18px; }
.success { color: #28A745; }







.scale-wrapper {
width: 100%;
margin: 30px auto 10px auto;
}
.scale-labels {
display: flex;
justify-content: space-between;
font-size: 16px;
line-height: 24px;
font-weight: bold;
margin-bottom: 6px;
}

.scale-labels .red {
color: #E63946;
}

.scale-labels .green {
color: #28A745;
}

.scale-labels .grey {
color: #FFBE0B;
}

.scale-bar {
width: 100%;
height: 24px;
background: linear-gradient(to right, #E63946, #FFBE0B, #28A745);
border-radius: 12px;
position: relative;
}

.scale-indicator {
position: absolute;
top: -4px;
width: 2px;
height: 32px;
background: #4d4d4c;
border-radius: 2px;
transition: left 0.5s ease;
}

.ticker-sentiment {
float: right;
}

.sentiment-info {
color: #FFFFFF;
text-decoration: none;
padding: 10px 20px;
border-radius: 50px;
display: table;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 16px;
line-height: 24px;
border: none;
}

#cookie-popup {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #222222;
color: #FFFFFF;
display: flex;
justify-content: space-between;
padding: 20px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
z-index: 9999;
flex-wrap: wrap;
}

.cookie-text {
flex: 1 1 70%;
padding-right: 20px;
}

.cookie-text a:hover {
color: #f28d32;
text-decoration: underline;
}

.cookie-buttons {
display: flex;
flex-direction: column;
gap: 10px;
flex: 0 0 200px;
align-items: flex-end;
padding-top:10px;
}

.cookie-buttons .button {
width: 100%;
}

.cookie-buttons .button:hover {
background-color: #FFFFFF;
color: #f28d32;
}

.cookie-text h3 {
color: #FFFFFF;
margin: 0px 0px 10px 0px;
}



@media (max-width: 1000px) {
#search {
margin-left: 90px;
}

.reviewFormContainer {
gap: 80px; 
}

.forms-container {
display: block;
}

#loginForm {
flex: 1;
padding: 0px 0px 30px 0px;
border-right: none;
border-bottom: 1px solid #eeeeee;
}

#signupForm {
padding: 20px 0px 0px 0px;
}

.ticker-letter, #stock_vote_home .ticker-letter {
max-width: 560px;
}

.review-info {
width: 610px;
}

.membership-upgrade .review-info {
width: 570px;
}

#stock_vote_home .ticker-container {
display: block;
}

#stock_vote_home .ticker-box {
max-width: 100%;
margin-bottom: 20px;
}

.ranking-username {
flex: 2;
}
}

@media (max-width: 900px) {
#search {
margin-left: 20px;
}
}

@media (max-width: 800px) {
#search {
padding: 4px 0px 8px 0px;
margin-left: 0px;
width: 100%;
display: block;
}

.search-container {
width: 100%;
margin: auto;
}

#banner {
margin-top: 120px;
}

.reviewFormContainer {
gap: 50px; 
}

#stock_vote .ticker-info p {
display: block;
width: 100%;
padding: 0px;
}

.ticker-letter, #stock_vote_home .ticker-letter {
max-width: 360px;
}

.cookie-text {
flex: auto;
padding-right: 0px;
margin-bottom: 20px;
}

#cookie-popup {
flex-direction: column;
align-items: flex-start;
}

.cookie-buttons {
flex-direction: row;
width: 100%;
justify-content: flex-end;
flex: 0 0 auto;
}

.cookie-buttons button {
width: auto;
}

.review-info {
width: 510px;
}

.membership-upgrade .review-info {
width: 470px;
}

.gold-member {
display: block;
}

.ranking-username {
display: block;
width: 100%;
flex: none;
}

.ranking-number {
width: 40px;
display: inline-block;
}

.ranking-likes {
display: inline-block;
flex: none;
margin: 1px 0px 5px 40px;
}

.ranking-reviews {
flex: none;
margin-top: 4px;
float: right;
}
}

@media(max-width: 700px) {
.forms-container { flex-direction: column; align-items: center; }
.forms-container form { width: 100%; }
.review-info {
width: 410px;
}

.membership-upgrade .review-info {
width: 370px;
}
}

@media (max-width: 600px) {
.ticker-box {
flex: 1 1 100%;
}

#banner {
margin-top: 105px;
}

#nav a {
font-size: 14px;
line-height: 18px;
}

#nav .button, .buttongold {
font-size: 14px;
line-height: 18px;
padding: 9px 10px 9px 10px;
}

.buttongoldlogin {
padding: 0px 8px 6px;
}

header .button {
margin-left: 5px;
}

.buttongoldlogin .material-symbols-outlined {
top: 8px;
}

header #nav {
padding: 8px 0px 4px 0px;
}

header #logo {
padding: 14px 0px 8px 0px;
}

header #logo img {
width: 160px;
}

.reviewFormContainer {
display: block;
}

#reviewForm .button {
margin-top: 20px;
}

.ticker-letter, #stock_vote_home .ticker-letter {
max-width: 220px;
}

.review-info {
width: 310px;
}

.membership-upgrade .review-info {
width: 270px;
}
}

@media(max-width: 500px) {
.review-info, .membership-upgrade .review-info {
display: block;
width: 100%;
}

.review-vote {
float: none;
margin-top: -77px;
width: max-content;
position: absolute;
left: 41px;
}

.review-vote p {
margin-left: auto;
}

#account-page .like-btn {
margin-top: 55px;
}

#membership-page .like-btn {
margin-top: 55px;
}

.like-btn {
margin-top: 45px;
}

.ticker-letter, #stock_vote_home .ticker-letter {
max-width: 120px;
}

.membership-upgrade .review-vote {
left: 64px;
}

.gold-highlight {
display: block;
width: 100%;
margin: 1px 0px 5px 0px;
}

.gold-highlight .gold-icon .material-symbols-outlined {
margin-left: 0px;
}

header #logo {
padding: 12px 0px 8px 0px;
}

header #logo img {
width: 32px;
}

#logo-mobile {
display: block;
}

#logo-desktop {
display: none;
}

.ranking-likes {
display: block;
width: 100%;
flex: none;
text-align: left;
margin: 1px 0px 5px 40px;
}

.ranking-reviews {
display: block;
width: 100%;
flex: none;
text-align: left;
margin-left: 40px;
float: none;
}
}