/* ================================
   Base Styles
================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'SUSE', sans-serif;
    background: url('../img/background.png') no-repeat center center fixed;
    background-size: cover;
    color: #3E2723;
    line-height: 1.6;
    padding-top: 80px;
}

/* ================================
   Typography
================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Pirata One', cursive;
    color: #F5DEB3;
    text-align: center;
    margin: 20px 0;
    text-shadow: 4px 1px 4px rgba(0, 0, 0, 0.5);
}

a {
    color: #8C6239;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #3E2723;
}

/* ================================
   Layout
================================= */
.container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    padding: 10px;
    border-radius: 3px;
    background: none;
    margin-top: 10px;
}

.left-sidebar, .right-sidebar {
    flex: 0 0 20%;
    max-width: 100%;
    border-radius: 5px;
    text-align: center;
    padding: 15px;
}

.left-sidebar {
    padding: 0;
}

#main-content {
    flex: 0 0 40%;
    min-width: 450px;
    background-color: rgba(59, 42, 42, 0.5);
    background: url('/assets/img/sideback1.png');
    border-radius: 5px;
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    color: #F5E6D3;
    text-align: center;
}

#main-content > * {
    background: url('/assets/img/sideback.png');
    background-color: rgba(45, 22, 22, 0.8);
    border-radius: 5px;
    padding: 20px;
    margin: 15px;
}

#main-content h2 {
    font-family: 'Pirata One', cursive;
    font-size: 18px;
    padding: 15px;
    border: none;
    text-align: center;
    width: 100%;
    color: #D2B48C;
    text-stroke: 1px black; /* note: not widely supported */
    margin: 20px auto 0 auto;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ================================
   Navigation (Top & Main Navbar)
================================= */
.top-navbar {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
                url('/assets/img/sideback.png');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 10px 15px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
}

.navbar-logo {
    width: 75px;
    height: auto;
}

#navbar {
    width: 70%;
    position: absolute;
    margin-top: 0;
    margin-left: 120px;
    padding: 0;
}

#navbar ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
}

#navbar li {
    flex: 1;
    text-align: center;
}

#navbar li a .icon {
    margin-right: 8px;
}

#navbar a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    font-family: 'Pirata One', sans-serif;
    font-size: 24px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#navbar a:hover {
    color: #F5DEB3;
    text-shadow: 0 0 5px rgba(245, 222, 179, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
}

/* ================================
   Forms
================================= */
.login-form {
    align-items: center;
    padding: 10px;
    margin: 10px;
}

.submit-button {
    background-color: #8C6239;
    color: white;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Pirata One', sans-serif;
}

/* ================================
   Header Container
================================= */
/* ================================
   Header Container
================================= */
#header-container {
    margin-top: 40px;
    position: relative;
}

/* ================================
   Hero Banner
================================= */
.hero-banner {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.7),
        rgba(0,0,0,0.3),
        rgba(0,0,0,0.8)
    );
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
    max-width: 800px;
    padding: 0 20px;

    /* Animação */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideUp 1.2s ease-out forwards;
}

/* Título */
.hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.hero-content h1 span {
    color: #e53935;
}

/* Texto */
.hero-content p {
    font-size: 1.3rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Botão */
.cta-btn {
    display: inline-block;
    background-color: #e53935;
    color: #fff;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.cta-btn:hover {
    background-color: #c62828;
}

/* ================================
   Responsividade
================================= */
@media (max-width: 768px) {
    .hero-banner {
        height: 60vh; /* ligeiramente mais pequeno em mobile */
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .cta-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .hero-banner {
        height: 50vh;
    }

    .hero-content h1 {
        font-size: 1.6rem;
    }

    .hero-content p {
        font-size: 0.9rem;
    }
}

/* ================================
   Animações
================================= */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ================================
   Responsive Styles
================================= */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 0 5px;
        margin: 0;
    }

    .left-sidebar, #main-content, .right-sidebar {
        width: 100%;
        margin: 0 0 20px 0;
        padding: 5px;
    }

    #main-content {
        flex: 1;
        min-width: 0;
    }
    #navbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 60px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(59, 42, 42, 0.9)),
                    url('/assets/img/sideback.png');
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    #navbar ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #navbar li {
        flex: 1;
        text-align: center;
    }

    #navbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5px 0;
        font-size: 12px;
        font-family: 'Pirata One', sans-serif;
        color: #F5DEB3;
        text-decoration: none;
    }

    #navbar a .icon {
        font-size: 18px;
        margin-bottom: 2px;
    }

    body {
        padding-bottom: 60px; /* Prevent content from being hidden under the navbar */
    }

    #header-container {
        margin-top: 0;
        height: 50vh;
        background-position: top;
    }

    table {
        width: 100%;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        margin: 5px 0;
    }

    th, td {
        padding: 5px;
        text-align: left;
    }
}
/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background: rgba(62, 39, 35, 0.8); /* Black with opacity */
    background-image: url('../img/login.jpg'); /* Optional background image */
    background-size: cover; /* Ensure image covers the whole background */
    background-position: center; /* Center the background image */
}

/* Modal content styling */
.modal-content {
    background-color: rgba(255, 255, 255, 0.9); /* Light background for the modal content */
    margin: auto; /* Center the modal */
    padding: 20px;
    width: 90%; /* Responsive width */
    max-width: 500px; /* Maximum width of the modal */
    border-radius: 8px; /* Rounded corners */
    display: flex;
    flex-direction: column;
    gap: 15px;
	background: url('/assets/img/sideback1.png');
	color: white;
}
.modal-content input {
    padding: 12px; /* Adjust as needed */
    font-size: 16px; /* Optional: Makes text larger */
    width: 100%; /* Optional: Makes input take full width */
}
.left-sidebar ul {
    list-style: none;
    padding: 0;
}

.left-sidebar li {
    margin-bottom: 10px;
}

.left-sidebar a {
    display: block;
    padding: 12px 15px;
    background-color: #77151a; /* Dark reddish-brown */
    color: #F5E6D3;
    text-align: center;
    text-decoration: none;
    border-radius: 4px; /* Slightly rounded edges */
    font-weight: bold;
    transition: background 0.3s ease-in-out;
	font-family: 'Pirata One', sans-serif;
	font-size: 18px;
	letter-spacing: 0.5px;  /* Subtle letter spacing */
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); 
}

.left-sidebar a:hover {
    background-color: #77151a; /* Darker shade on hover */
}


/* Close button styles */
.close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
}

.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Header text styles */
.modal-content h2 {
    color: #f2d474;
    font-family: 'Pirata One', sans-serif;
    margin-bottom: 20px;
    text-align: center;
}

/* Form styling */
#login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Input and label styling */
.form-line {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Button layout styling */
.full-width {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* Submit button styling (Golden color) */
.submit-button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background-color: #77151a; /* Golden-yellow color */
    color: #fff;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #514823; /* Slightly darker golden-yellow on hover */
}

/* Cancel button styling (Red color) */
#cancel-login {
    background-color: #77151a; /* Red color for cancel */
}

#cancel-login:hover {
    background-color: #513023; /* Darker red on hover */
}

.left-sidebar, .right-sidebar {
    background-color: rgba(74, 60, 50, 0.2);
    /* Another dark brown color with transparency */
    border-radius: 5px;
    padding: 0px;
    margin-left: 0px;
}
/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 16px;
    font-family: 'SUSE', sans-serif;
    background-color: rgba(62, 39, 35, 0.8);
    /* Dark brown background with transparency */
    color: #F5E6D3;
    /* Light text color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for the table */
    border-radius: 5px;
    /* Rounded corners for the table */
}
th, td {
    padding: 12px 15px;
    border: 1px solid rgba(92, 64, 51, 0.8);
    /* Lighter brown border with transparency */
    text-align: left;
    border-radius: 3px;
    /* Slightly rounded corners for cells */
}
th {
    background-color: rgba(124, 48, 48, 0.8);
    /* Bordo background for headers with transparency */
    color: #af9c82;
    /* Light text color */
    font-weight: bold;
}
tr:nth-child(even) {
    background-color: rgba(74, 44, 42, 0.8);
    /* Darker brown for even rows with transparency */
}
tr:hover {
    background-color: rgba(92, 64, 51, 0.8);
    /* Lighter brown on hover with transparency */
}
/* General styling for the server info section */
/* Chart container */
#kingdom-chart-container {
    position: relative;
    border-radius: 15px;
    padding: 30px;
    margin-top: 30px;
}
/* Each kingdom card */
.kingdom-card {
    display: flex;
    align-items: center;
    padding: 20px;
    background-size: cover;
    border-radius: 12px;
    margin-bottom: 15px;
    color: #fff;
    position: relative;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    /* Increased shadow depth */
    transition: transform 0.3s;
    /* Smooth transition for hover effect */
}
/* Hover effect for kingdom cards */
.kingdom-card:hover {
    transform: scale(1.02);
    /* Slightly scale up on hover */
}
/* Kingdom flag image */
.kingdom-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 20px;
    border: 3px solid #fff;
    /* White border for better visibility */
}
/* Kingdom title */
.kingdom-card h4 {
    margin: 0;
    font-size: 26px;
    /* Slightly larger font size */
    font-weight: bold;
    color: white;
}
/* Kingdom member count */
.kingdom-card span {
    font-size: 20px;
    /* Slightly larger font size */
    font-weight: bold;
}
/* Specific kingdom styles with better contrast */
.kingdom-shinsoo {
    background-image: url('/assets/img/flags/kingdom1.png');
    background-blend-mode: overlay;
    /* Overlay effect for better text visibility */
}
.kingdom-chunjo {
    background-image: url('/assets/img/flags/kingdom2.png');
    background-blend-mode: overlay;
}
.kingdom-jinno {
    background-image: url('/assets/img/flags/kingdom3.png');
    background-blend-mode: overlay;
}

/* Character row container */
.character-row-accounts {
    position: relative;
    display: flex;
    /* Change to flex for layout */
    align-items: center;
    /* Align items to the center */
    padding: 10px;
    margin: 15px 0;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Character image with rounded styling */
.character-image-accounts-main {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* Bordo color */
    /* Changed to margin-right for positioning */
    /* Bordo color */
    background:#3E2723;
}
.character-image-accounts {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: top;
}


/* Character info styling */
.character-info-accounts {
    color: #fff;
    font-family: 'SUSE', sans-serif;
    display: flex;
    /* Change to flex for layout */
    flex-direction: row;
    /* Align name and level horizontally */
    justify-content: flex-start;
    /* Align items to the start */
    align-items: center;
    /* Center items vertically */
    flex-grow: 1;
    /* Allow info to take available space */
}
/* Character name link styling */
.character-name-accounts a {
    font-size: 18px;
    color: #2e0101; /* Bordeaux color for better visibility */
    background-color: #fff; /* White for contrast */
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-bottom: 5px; /* Space between name and level */
    display: block; /* Makes the link appear as a block-level element */
}

.character-name-accounts a:hover {
    color: #fff; /* White for contrast */
    background-color: #B22222; /* Bordeaux color */
}

/* Character level styling */
.character-level-accounts {
    font-size: 14px;
    padding: 5px;
    margin: 5px;
    color: #ddd;
    display: block;
    font-family: SUSE;
    margin-top: 65px;
    position: absolute;
    margin-left: 10px;
}

/* Unbug Button styling */
.unbug-button-accounts {
    font-family: 'SUSE', sans-serif;
    font-size: 18px;
    padding: 10px 20px;
    color: #B22222;
    /* Bordo color */
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #B22222;
    /* Bordo color */
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}
.unbug-button-accounts:hover {
    background-color: #B22222;
    /* Bordo color */
    color: #fff;
    /* White for contrast */
}
.switcher {
    background-color: rgba(34, 34, 34, 0.9);
    /* Dark background */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    /* Darker shadow */
    align-text: center;
}
.switcher-title {
    font-family: 'SUSE', sans-serif;
    color: #FFD700;
    /* Gold color */
    display: flex;
	font-size: 15px;
    align-items: center;
}
.switcher-icon {
    margin-right: 8px;
    color: #FFD700;
    /* Gold color for the icon */
}

.itemshop-items {
    width: 100%;
}

.itemshop-item {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    border: 1px solid #ddd;
}

.itemshop-item td {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

/* Style for the item image container */
.item-image {
    text-align: center; /* Center horizontally */
    vertical-align: middle; /* Center vertically */
}

.item-image-container {
    display: flex;
    flex-direction: column; /* Stack the image and the text */
    justify-content: center; /* Center the content vertically */
    align-items: center; /* Center the content horizontally */
    height: 100%; /* Make sure the container takes the full height of the table cell */
}

.item-image img {
    max-width: 100%; /* Ensure image fits within its container */
    height: auto; /* Maintain the aspect ratio */
}

.item-image p {
    margin-top: 8px; /* Space between image and text */
    font-size: 14px; /* Adjust text size */
    text-align: center;
}

/* Description */
.item-description {
    width: 40%;
    text-align: center;
}

/* Price */
.item-price {
    width: 20%;
    font-weight: bold;
    text-align: center;
}

/* Buy Button */
.item-action {
    width: 20%;
    text-align: right;
}

.buy-button {
    padding: 8px 15px;
    background-color: #5a2a2a; /* Dark reddish-brown */
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.buy-button:hover {
    background-color: #4b1f1f; /* Slightly darker on hover */
}
/* Footer */
/* Footer */
footer {
    background-color: rgba(124, 48, 48, 0.2);
    color: #F5DEB3;
    text-align: center;
    padding: 30px 0;
    margin-top: 40px;
    background: url('/assets/img/sideback.png');
}

/* Footer Content: Center align all sections */
.footer-content {
    display: flex;
    justify-content: center;  /* Center sections horizontally */
    align-items: center;  /* Center sections vertically */
    flex-wrap: wrap;  /* Allows wrapping for smaller screens */
    padding: 20px;
}

/* Footer Section: Ensure center alignment within each section */
.footer-section {
    flex: 1 1 200px;  /* Grow/shrink as needed, minimum 200px width */
    margin: 10px;
    text-align: center;  /* Center text within each section */
}

/* Styling for section titles */
.footer-section h3 {
    font-family: 'Pirata One', sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Styling for paragraphs and links inside sections */
.footer-section p, .footer-section ul {
    font-family: 'SUSE', sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 5px;
}

.footer-section ul li a {
    color: #F5DEB3;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #8C6239;  /* Change color on hover */
}

/* Social Media Icons */
.social-icons a {
    margin: 0 5px;
    color: #F5DEB3;
    font-size: 20px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #8C6239;  /* Change color on hover */
}

/* Footer bottom section */
.footer-bottom {
    background-color: rgba(124, 48, 48, 0.5);
    padding: 10px 0;
    font-size: 12px;
}

/* Responsive design */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;  /* Stack sections vertically on small screens */
        align-items: center;  /* Center sections vertically */
    }

    .footer-section {
        text-align: center;  /* Ensure text is centered on small screens */
    }
}
/* Top 10 Styles */
.top-players-table td:nth-child(3) a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 12px;
    background-color: #3b2f2f; /* Dark brown background */
    color: #f5e6c8; /* Light cream text color */
    font-family: 'SUSE', sans-serif;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease-in-out;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* Subtle inner shadow */
}

.top-players-table td:nth-child(3) a:hover {
    background-color: #4a3a3a; /* Slightly lighter dark brown on hover */
}
#navbar .icon img {
    width: 30px; /* Adjust as needed */
    height: 30px; /* Adjust as needed */
    vertical-align: middle; /* Aligns the icon with the text */
}
/* Base styles for alert divs */
.alert {
    padding: 15px;
    border-radius: 25px; /* Rounded corners */
    margin: 10px 0;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: white; /* White text */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Subtle glow effect */
    animation: glow 1.5s infinite alternate; /* Pulsating glow animation */
}

/* Success alert (green neon) */
.alert-success {
    background: linear-gradient(144deg, #027a02, #023c02); /* Subtle green gradient */
    border: 1px solid #0a8500; /* Subtle green border */
    text-shadow: 0 0 2px #00ff00, 0 0 2px #002b00; /* Subtle green neon text shadow */
}

/* Error alert (red neon) */
.alert-danger {
    background: linear-gradient(144deg, #7a0202, #3c0202); /* Subtle red gradient */
    border: 1px solid #850000; /* Subtle red border */
    text-shadow: 0 0 2px #ff0000, 0 0 2px #2b0000; /* Subtle red neon text shadow */
}

/* Glow animation */
@keyframes glow {
    from {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }
    to {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
}
    .buy-button {
        background: linear-gradient(to bottom, #d2b48c, #c2a171);
        border: 2px solid #8b5a2b;
        padding: 10px 20px;
        font-size: 18px;
        font-weight: bold;
        color: brown;
        text-shadow: 1px 1px 2px #5a3d1a;
        border-radius: 8px;
        cursor: pointer;
        margin: 10px;
        position: relative;
    }
    .buy-button:hover {
        background: linear-gradient(to bottom, #c2a171, #a08060);
    }
	
.sidebar-title {
    font-size: 24px; /* Tamanho da fonte */
    font-weight: bold; /* Deixar o texto em negrito */
    color: #F5DEB3; /* Cor clara para o texto */
    text-align: center; /* Alinhamento à esquerda */
    margin-bottom: 15px;
    position: relative; /* Necessário para o pseudo-elemento */
    padding: 15px 20px; /* Adicionar espaçamento para o título */
    background-color: rgba(78, 42, 42, 0.7); /* Cor de fundo com opacidade */
    background-image: url('/assets/img/sideback.png'); /* Substitua pelo caminho da imagem de madeira */
    background-size: cover;
    background-position: center;
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adicionar sombra sutil */
}

/* Adicionando a linha separadora sutil */
.sidebar-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%; /* Largura da linha */
    height: 2px; /* Espessura da linha */
    background-color: #8C6239; /* Cor da linha de separação */
    opacity: 0.5; /* Transparência para efeito sutil */
}

/* Efeito de hover (quando o mouse passa sobre o título) */
.sidebar-title:hover {
    color: #fff; /* Mudança na cor do texto */
    background-color: #6f3b3b; /* Cor de fundo um pouco mais clara ao passar o mouse */
}

/* Adicionando sombra no texto */
.sidebar-title {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Sombra sutil para o texto */
}
/* Account info container */
.account-info, .server-info, .race-statistics, .kingdom-statistics, .top-players, .top-guilds {
    background-color: rgba(62, 39, 35, 0.8); /* Dark brown with transparency similar to the table */
    padding: 15px;
	margin-top: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    color: #F5E6D3; /* Light text color matching the table */
    min-width: 240px; /* Minimum width */
}

/* Centered text style */
.account-info p {
    text-align: center;
    font-size: 16px;
    margin: 10px 0;
}

/* Username styled class */
.username-styled {
    font-size: 20px;
    font-weight: bold;
    color: #AF9C82; /* Light beige/olive color for username, matching the table headers */
    text-transform: uppercase;
}

/* Country flag styling */
.flag-icon {
    width: 20px;
    height: 14px;
    margin-left: 8px;
    vertical-align: middle; /* Align flag with the text */
}

/* Key information style (bold and clear) */
.account-info p strong {
    color: #F5E6D3; /* Light text color for key information */
    font-weight: bold;
    margin-right: 5px;
}

/* Section for social information (Social ID, Language) */
.account-info p:last-child {
    background-color: rgba(74, 44, 42, 0.8); /* Dark brown for social info, similar to even table rows */
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
}
.account-section {
    background-color: #f9f9f9;
    border-left: 6px solid #007BFF; /* Blue accent */
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.account-info-table, .players-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 0.9em;
}

.account-info-table td, .players-table td, .players-table th {
    padding: 5px 8px;
    border-bottom: 1px solid #e5e5e5;
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1em;
    margin-bottom: 6px;
    font-weight: bold;
    color: #333;
}

.account-id-highlight {
    color: #c00; /* Strong red to highlight ID */
    font-weight: bold;
    font-size: 0.95em;
}


.server-info p {
    font-size: 1.1rem;
    margin: 8px 0;
    padding: 6px 0;
    border-bottom: 1px solid #333;
    transition: color 0.3s ease;
    cursor: default;
}

.server-info p:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.server-info p:hover {
    color: #f0a500; /* Gold highlight on hover */
    font-weight: 600;
}

.server-info small {
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    color: #aaa;
    margin-left: 5px;
}

@media (max-width: 400px) {
    .server-info {
        max-width: 90vw;
        padding: 20px;
    }
    .sidebar-title {
        font-size: 1.8rem;
    }
    .server-info p {
        font-size: 1rem;
    }
}
.download-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 30px;
}

.download-btn {
    padding: 12px 20px;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.2s ease;
}

.download-btn:hover {
    background-color: #218838;
}
.support-form {
  background: #f9f9f9;        /* Light gray background */
  padding: 20px;              /* Space inside */
  border-radius: 8px;         /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Soft shadow */
  max-width: 500px;           /* Max width */
  margin: 20px auto;          /* Center horizontally with margin top/bottom */
  font-family: Arial, sans-serif;
}

.support-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #333;
}

.support-form input[type="text"],
.support-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  font-size: 14px;
  font-family: inherit;
}

.support-form button {
  background-color: #007bff; /* Bootstrap blue */
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.support-form button:hover {
  background-color: #0056b3;
}
/* Ticket Table Styling */
.ticket-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.ticket-actions form {
    display: inline-block;
    margin: 0;
}

.btn-danger {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-danger:hover {
    background: #c0392b;
}

.no-tickets {
    color: #95a5a6;
    text-align: center;
    padding: 20px;
}