/* === Albion Data Viewer - Full Stylesheet === */

/* === Loading Spinner === */
.adv-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50px; /* Give it some space */
    padding: 5px;
    color: #8a95a1;
}

.adv-spinner {
    width: 25px;
    height: 25px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #5865F2; /* Spinner color */
    border-radius: 50%;
    animation: adv-spin 1s linear infinite;
    margin-bottom: 10px;
}

.adv-spinner-text {
    font-size: 0.9em;
    font-style: italic;
}

@keyframes adv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Filter bubbles for listing creation form */
.adv-omnisearch-container .adv-dashboard-filter-container {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

#adv-listing-item-omnisearch .adv-omnisearch-input {
    position: relative;
    padding-right: 205px;
}

.adv-filter-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: #3a3f44;
    border-radius: 15px;
    padding: 4px 10px 4px 12px;
    height: 28px;
    box-sizing: border-box;
    color: #c0c0c0;
    font-size: 0.8em;
    font-weight: 500;
}

.adv-filter-label {
    margin-right: 4px;
    pointer-events: none;
}

.adv-filter-selected-value {
    color: #ffffff;
    font-weight: 600;
    pointer-events: none;
}

.adv-filter-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Makes the select element invisible */
    cursor: pointer;
}

/* === Enchantment Border Sweep Animation === */

/* The keyframe animation for the border rotation */
@keyframes border-sweep {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* The parent card needs to be a positioning context and hide the overflowing animation. */
.adv-listing-card,
.adv-public-listing-card,
.adv-itempage-listing-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #40454a; /* A subtle base border */
}

/* The ::before pseudo-element is the rotating gradient layer. */
.enchantment-1::before,
.enchantment-2::before,
.enchantment-3::before,
.enchantment-4::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* Make the pseudo-element a large square */
    width: 250%;
    height: 0;
    padding-bottom: 250%; /* Use padding-bottom for a responsive square */
    
    /* The conic gradient creates a 'spotlight' or 'blob' effect that we rotate */
    background: conic-gradient(
        from 180deg at 50% 50%,
        transparent 0,
        transparent 80%, /* Most of the gradient is transparent */
        var(--hue-color, transparent) 95%, /* The blob of color */
        transparent 100%
    );
    
    /* The animation itself, using a non-linear timing function for varying speed */
    animation: border-sweep 8s infinite linear;
}

/* The ::after pseudo-element acts as a mask, creating the 'border' effect.
   It's a solid block of color placed on top of the gradient, but inset by a few pixels. */
.adv-listing-card::after,
.adv-public-listing-card::after,
.adv-itempage-listing-card::after {
    content: '';
    position: absolute;
    top: 2px;     /* The thickness of the animated border */
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-color: #2a2d2f; /* Original background color of the card */
    border-radius: 8px; 
}
/* The item page card has a different background color and rounding */
.adv-itempage-listing-card::after {
    background-color: #25282b;
    border-radius: 6px;
}

/* All direct children of the card need a higher z-index to appear on top of the effect. */
.adv-listing-card > *,
.adv-public-listing-card > *,
.adv-itempage-listing-card > * {
    position: relative;
    z-index: 1;
}

/* Define the specific hue color for each enchantment level */
.enchantment-1 { --hue-color: #5edd7e; }
.enchantment-2 { --hue-color: #49f1ff; }
.enchantment-3 { --hue-color: #BA87FB; }
.enchantment-4 { --hue-color: #FEE96B; }

/* --- Form Message Boxes --- */
.adv-form-message {
    padding: 15px 20px;
    margin: 20px 0;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.95em;
    line-height: 1.5;
    text-align: center;
}

.adv-form-message.adv-form-error {
    background-color: rgba(231, 76, 60, 0.15); /* Soft Red Background */
    border-color: #e74c3c; /* Red Border */
    color: #f5a7a1; /* Light Red/Pink Text for readability */
}

.adv-form-message.adv-form-error a {
    color: #ffffff; /* Make links white for high contrast */
    font-weight: 600;
    text-decoration: underline;
}

.adv-form-message.adv-form-success {
    background-color: rgba(46, 204, 113, 0.15); /* Soft Green Background */
    border-color: #2ecc71; /* Green Border */
    color: #a0e7af; /* Light Green Text */
}

/* User Level Indicator Styles */
.adv-card-user-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f0f0f0;
    font-size: 10px; /* smaller font */
    font-weight: bold;
    border-radius: 3px; /* slightly less rounded */
    min-width: 18px; /* smaller base width */
    height: 18px;    /* smaller height */
    padding: 0 4px;  /* smaller padding */
    margin-right: 5px; /* smaller margin */
    border: 1px solid; /* border color will be set by tier */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Tier 1 (1-9): Grey */
.adv-card-user-level.level-tier-1 {
    background-color: #5a5a66;
    border-color: #787882;
}

/* Tier 2 (10-24): Greenish */
.adv-card-user-level.level-tier-2 {
    background-color: #3d8b40;
    border-color: #59b35d;
}

/* Tier 3 (25-49): Goldish */
.adv-card-user-level.level-tier-3 {
    background-color: #c5a643;
    border-color: #e4c45b;
}

/* Tier 4 (50+): Purplish */
.adv-card-user-level.level-tier-4 {
    background-color: #6a3093;
    border-color: #a044ff;
}


.adv-card-user-info,
.adv-itempage-card-user-info {
    display: flex;
    align-items: center;
}

/* Hide the old order type text on dashboard cards */
.adv-card-row-top .adv-card-listing-type {
    display: none;
}

/* === PROFILE OVERVIEW & UPDATED PROGRESS BAR STYLES === */

/* Main container for the new profile block */
.adv-profile-overview-container {
    padding-bottom: 25px !important;
}

.adv-profile-content {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.adv-profile-greeting {
    font-size: 1.1em;
    color: #e0e0e0;
    padding-bottom: 15px;
    border-bottom: 1px solid #4a4a4f;
}

.adv-profile-level-section h4 {
    margin: 10px 0 15px 0;
    text-align: center;
    color: #f0f0f0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Container for the level bar itself */
.adv-level-progress-bar-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.adv-level-label {
    font-weight: bold;
    font-size: 14px;
    color: #c0c0c0;
    flex-shrink: 0;
}

.adv-level-label.max-level {
    width: 100%;
    text-align: center;
    color: #a777e3;
    font-weight: bold;
}

.adv-progress-bar-wrapper {
    flex-grow: 1;
    height: 22px;
    background-color: #1a1a1d;
    border-radius: 11px;
    overflow: hidden;
    border: 1px solid #444;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
    position: relative;
}

/* The animated purple progress bar */
.adv-progress-bar {
    height: 100%;
    border-radius: 11px; /* Increased to match the container's radius for a circular nub */
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    background: linear-gradient(90deg, #6a3093 0%, #a044ff 100%);
    overflow: hidden;
    position: relative;
    min-width: 1%; /* Changed to percent and adjusted value */
}

/* Shimmer animation keyframes */
@keyframes progress-shimmer {
    0% { transform: translateX(-100%) skewX(-20deg); }
    100% { transform: translateX(250%) skewX(-20deg); }
}

/* Shimmer pseudo-element */
.adv-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    animation: progress-shimmer 2.5s infinite linear;
    opacity: 0.8;
}

/* Stats Sections */
.adv-profile-stats-section,
.adv-profile-server-stats-section {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    padding: 15px;
    background-color: #363639;
    border-radius: 8px;
    margin-top: 5px;
}

.adv-stat-item,
.adv-server-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-basis: 0;
    flex-grow: 1;
}

.adv-stat-label {
    font-size: 0.9em;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.adv-stat-value {
    font-size: 1.4em;
    font-weight: bold;
    color: #ffffff;
}

/* --- Public Listings Feed Styles (Label Alignment & Consistency) --- */

/* --- Responsive Fix for Public Listing Card on Mobile --- */
@media (max-width: 600px) {
    .adv-public-listing-card {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 10px;
        /* Add padding to the bottom to create space for the absolutely positioned time element */
        padding-bottom: 30px; 
    }

    .adv-card-details-group {
        flex-grow: 1;
        min-width: 0;
    }

    .adv-card-metrics-group {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: flex-start;
        gap: 25px;
    }

    .adv-card-metrics-group .adv-card-field,
    .adv-card-metrics-group .adv-card-label,
    .adv-card-metrics-group .adv-card-value,
    .adv-card-metrics-group .adv-card-listing-type-public {
        text-align: left;
    }
    
    .adv-card-metrics-group .adv-card-field {
        flex-grow: 0;
        min-width: auto;
    }

    .adv-card-time-ago {
        /* On mobile, keep absolute positioning but move it to the left */
        visibility: hidden;
    }
}

/* --- Listings Ticker Page --- */
.adv-ticker-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.adv-ticker-toggle-btn {
    padding: 8px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9em;
    font-weight: 500;
    color: #a0a0a0;
    background-color: #2a2d2f;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.adv-ticker-toggle-btn.active {
    color: #ffffff;
    background-color: #5865F2;
    border-color: #5865F2;
}

.adv-ticker-page-container {
    display: flex;
    justify-content: center; /* This is the key change to center the columns */
    flex-wrap: wrap; /* Allows columns to stack on small screens */
    gap: 20px;
}

.adv-ticker-column {
    flex: 1 1 350px; /* Each column will try to be 350px, but can grow/shrink */
    max-width: 500px; /* Prevents columns from getting too wide on large screens */
    display: flex;
    flex-direction: column;
    background-color: #25282b;
    border: 1px solid #383d42;
    border-radius: 8px;
    padding: 15px;
}

.adv-ticker-column-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    color: #EEEEEE;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
    text-align: center;
}

.adv-ticker-column .adv-public-listing-card {
    max-width: 750px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* --- Live Listing Card - Time Ago Indicator --- */
.adv-card-time-ago {
    position: absolute;
    bottom: 5px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #8a95a1;
    background-color: transparent; /* Background is now transparent */
    padding: 1px 4px;
    border-radius: 3px;
}

.adv-time-ago-icon {
    width: 10px; /* Tiny icon */
    height: 10px;
    fill: currentColor;
    flex-shrink: 0;
}

.adv-time-ago-text {
    font-size: 0.7em; /* Very small font */
    font-style: italic;
    line-height: 1;
    white-space: nowrap;
}

.adv-public-listings-feed {
    margin-bottom: 30px;
}

.adv-listings-card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.adv-public-listing-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #2a2d2f;
    border: 1px solid #40454a;
    border-radius: 8px;
    padding: 12px 18px;
    text-decoration: none;
    color: #e0e0e0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
} 

.adv-public-listing-card:hover {
    background-color: #32373c;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transform: translateY(-2px); 
}

/* 1. Icon Wrapper & Icon */
.adv-public-listing-card .adv-card-icon-wrapper {
    flex-shrink: 0;
    display: flex; 
    align-items: center;
    height: 52px; 
}
.adv-public-listing-card .public-listing-icon {
    width: 52px;  
    height: 52px;
    object-fit: contain;
    border-radius: 4px; 
    background-color: transparent !important; 
    border: none !important;                  
    padding: 0 !important;                   
}

/* 2. Details Group (Item Name & Seller) */
.adv-public-listing-card .adv-card-details-group {
    display: flex;
    flex-direction: column; 
    flex-grow: 1; 
    min-width: 0; 
    justify-content: center; 
    align-self: stretch; 
    gap: 2px;
}
.adv-public-listing-card .adv-card-item-name {
    font-size: 1.0em; 
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adv-public-listing-card .adv-card-seller-name { 
    font-size: 0.8em;
    color: #a0a7b1; 
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Common style for field blocks (Price, Quantity, Type) */
.adv-public-listing-card .adv-card-field {
    display: flex;
    flex-direction: column;
    padding: 0 5px; /* Add some padding to create space if values are very wide */
    justify-content: flex-start; /* Align label to the top of this field block */
    align-self: stretch;     /* Make all field blocks the same height as the flex line */
    text-align: right;       /* Default text align for these fields to right */
}
.adv-public-listing-card .adv-card-label { 
    font-size: 0.65em; /* Consistent small size */
    font-weight: 600;
    text-transform: uppercase;
    color: #8a95a1; 
    margin-bottom: 3px; /* Consistent spacing */
    letter-spacing: 0.05em;
    white-space: nowrap;
    line-height: 1.2; /* Consistent line height */
    width: 100%; /* Make label take full width of its field for text-align */
}
.adv-public-listing-card .adv-card-value {
    font-size: 0.9em; 
    color: #e0e6eb; 
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    width: 100%; /* Make value take full width for text-align */
}

/* Specific fields adjustments */
.adv-public-listing-card .adv-field-price .adv-card-value.price-value { /* Renamed class slightly */
    font-size: 0.95em; /* Price value distinct */
    font-weight: 600;
    color: #ffffff;
}
.adv-public-listing-card .adv-card-price .silver-icon-small { /* Keep this selector as is */
    display: inline-block; width: 0.7em; height: 0.7em; 
    background-color: #b0b7c1; 
    border-radius: 50%; margin-left: 3px; vertical-align: middle;
}
/* --- NEW: Wrapper for right-aligned metrics to ensure consistent alignment --- */
.adv-card-metrics-group {
    display: flex;
    /* flex-shrink: 0; -- Removed to allow this group to shrink on smaller screens */
    margin-left: auto; /* Pushes the entire metrics block to the right */
    gap: 15px; /* Adjust the gap between Price, Quantity, and Type fields */
    align-items: flex-start;
}

/* Common style for fields within the metrics group */
.adv-card-metrics-group .adv-card-field {
    min-width: 80px; /* A consistent minimum width for all fields */
    text-align: right; /* Align text to the right within each field */
}

/* Field for Order Type */
.adv-public-listing-card .adv-field-type .adv-card-listing-type-public { /* This is the value span */
    font-weight: 700; 
    text-transform: uppercase;
    background-color: transparent; 
    padding: 0; /* No padding as it's just text now */
}
.adv-public-listing-card .adv-listing-type-sell { 
    color: #e74c3c !important; 
}
.adv-public-listing-card .adv-listing-type-buy { 
    color: #2ecc71 !important; 
}

.adv-no-public-listings {
    color: #888;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* --- User Dashboard - My Listings Section (Overlay Feedback) --- */

/* --- Styles for Clickable Listing Cards --- */
.adv-listing-card.is-clickable {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.adv-listing-card.is-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.adv-my-listings-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Existing */
    gap: 25px;
}

/* Layout Mode Adjustments for the Grid Container */
.adv-my-listings-grid.layout-mode-1-server {
    grid-template-columns: 1fr; /* Single server takes full width */
}
.adv-my-listings-grid.layout-mode-2-servers {
    grid-template-columns: repeat(2, 1fr); /* Two servers, 50% each */
}
.adv-my-listings-grid.layout-mode-3-servers {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Default 3-col responsive */
}


/* Styles for the single active server layout (internal 2-column for Sell/Buy) */
/* Layout Mode Adjustments for the Grid Container */
.adv-my-listings-grid.layout-mode-1-server {
    grid-template-columns: repeat(2, 1fr); /* Two columns for Sell/Buy */
}
.adv-my-listings-grid.layout-mode-2-servers {
    grid-template-columns: repeat(2, 1fr); /* Two columns for Server1/Server2 */
}
.adv-my-listings-grid.layout-mode-3-servers {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Default 3-col responsive */
}

/* Title for the single-server layout, spans both columns */
.adv-my-listings-grid.layout-mode-1-server .adv-single-server-title {
    grid-column: 1 / -1; /* Correctly spans the two columns below */
    margin-bottom: 0; /* Reset margin, as the h4 will handle it */
}

/* Restore the original heading style for the single-server layout */
.adv-single-server-title h4 {
    font-size: 1.3em;
    color: #e8e6e3;
    margin-bottom: 18px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    font-weight: 500;
    text-align: left;
    display: block; /* Make it a block-level element */
}

/* Panes for 2 and 3 server layouts to group sell/buy orders */
.adv-server-pane {
    margin-top: 15px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .adv-my-listings-grid.layout-mode-2-servers,
    .adv-my-listings-grid.layout-mode-3-servers {
         grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* For smaller screens, all layouts stack into a single column */
    .adv-my-listings-grid.layout-mode-1-server,
    .adv-my-listings-grid.layout-mode-2-servers,
    .adv-my-listings-grid.layout-mode-3-servers {
        grid-template-columns: 1fr;
    }
}

/* Ensure listing cards stack vertically within panes/columns */
.adv-my-listings-column .adv-listing-card,
.adv-single-server-pane .adv-listing-card {
    /* Existing card styles apply, ensure they don't conflict with flex/grid children if any */
}

/* Responsive adjustments for layout modes if auto-fit isn't enough */
@media (max-width: 992px) { /* Example: Medium screens */
    .adv-my-listings-grid.layout-mode-2-servers,
    .adv-my-listings-grid.layout-mode-3-servers {
        /* May already be 1 or 2 columns due to auto-fit, can force to 1fr if needed */
        /* grid-template-columns: 1fr; */
    }
     .adv-my-listings-column.single-server-column .adv-single-server-panes-wrapper {
        flex-direction: column; /* Stack sell/buy panes on smaller screens */
        gap: 0; /* Remove gap if stacked, rely on card margins */
    }
    .adv-my-listings-column.single-server-column .adv-single-server-pane {
        flex-basis: 100%; /* Panes take full width when stacked */
    }
}

@media (max-width: 768px) {
    /* .adv-my-listings-grid was already set to 1fr for cards, this will also apply to these modes */
    .adv-my-listings-grid.layout-mode-1-server,
    .adv-my-listings-grid.layout-mode-2-servers,
    .adv-my-listings-grid.layout-mode-3-servers {
        grid-template-columns: 1fr; /* Force single column for server blocks */
    }
     .adv-my-listings-column.single-server-column .adv-single-server-panes-wrapper {
        flex-direction: column;
    }
}

.adv-my-listings-section {
    margin-top: 40px;
    padding-top: 30px;
    color: #e0e0e0;
}
.adv-my-listings-section h3 { 
    font-size: 1.6em;
    color: #ffffff;
    margin-bottom: 25px;
    font-weight: 600;
    text-align: left;
}

.adv-my-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.adv-my-listings-column h4 { 
    font-size: 1.3em;
    color: #e8e6e3;
    margin-bottom: 18px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    font-weight: 500;
}

.adv-listing-type-header { 
    font-size: 1.0em;
    color: #b0b7c1;
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.adv-listing-type-header.adv-type-sell-header { 
    border-left: 3px solid #e74c3c; 
    padding-left: 8px; 
}
.adv-listing-type-header.adv-type-buy-header { 
    border-left: 3px solid #2ecc71; 
    padding-left: 8px; 
}

.adv-listing-card {
    background-color: #2a2d2f; 
    border: 1px solid #40454a;    
    border-radius: 10px; 
    padding: 18px 20px; 
    margin-bottom: 20px;       
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); 
    display: flex;
    flex-direction: column;
    gap: 15px; 
    position: relative;   /* <<<< CRUCIAL: For absolute positioning of feedback */
    /* overflow: hidden; /* Optional: if you want to ensure rounded corners clip everything */
}

.adv-card-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding-bottom: 12px; 
    border-bottom: 1px solid #383e44; 
}
.adv-card-item-ident {
    display: flex;
    align-items: center;
    gap: 12px; 
}
.adv-card-item-icon { 
    width: 42px; height: 42px; object-fit: contain; border-radius: 6px; 
    flex-shrink: 0; padding: 2px; 
}
.adv-card-item-name {
    font-size: 1.15em; font-weight: 600; color: #ffffff;
}
.adv-card-listing-type {
    font-size: 0.9em; font-weight: 600; text-transform: uppercase;
    padding: 5px 10px; border-radius: 5px; line-height: 1;
}
.adv-card-listing-type.adv-type-sell-text { color: #ffffff; background-color: #c84038; }
.adv-card-listing-type.adv-type-buy-text { color: #ffffff; background-color: #38a86a; }

.adv-card-row-middle {
    display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; 
}
.adv-card-field {
    display: flex; flex-direction: column; flex: 1; min-width: 70px; 
}
.adv-card-label { 
    font-size: 0.7em; font-weight: 600; text-transform: uppercase;
    color: #a0a7b1; margin-bottom: 4px; letter-spacing: 0.05em;
}
.adv-card-value {
    font-size: 0.95em; color: #e0e6eb; word-break: break-word; line-height: 1.4;
}
.adv-card-field .adv-card-value { min-height: 1.4em; }
.adv-card-row-middle .adv-card-field:last-child .adv-card-value { /* Note value */
    font-size: 0.9em; color: #b0b7c1; font-style: normal; 
    white-space: pre-wrap; line-height: 1.5;
}
.adv-card-price .silver-icon-small { 
    display: inline-block; width: 0.8em; height: 0.8em; 
    background-color: #b0b7c1; border-radius: 50%; margin-left: 4px; vertical-align: middle;
}

.adv-card-row-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px; border-top: 1px solid #383e44; margin-top: auto; 
}
.adv-card-expires { font-size: 0.85em; color: #9098a1; }
.adv-card-actions { display: flex; gap: 10px; }

.adv-card-actions .adv-button-extend,
.adv-card-actions .adv-button-remove {
    padding: 7px 14px; font-size: 0.8em; font-weight: 500;
    border-radius: 5px; color: #ffffff; border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: background-color 0.15s ease-out, transform 0.1s ease-out, box-shadow 0.15s ease-out;
    line-height: 1.2; 
}
.adv-button-extend { background-color: #5865F2; border-color: #5865F2; }
.adv-button-extend:hover { background-color: #4a58dd; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.adv-button-extend:active {transform: translateY(0px); box-shadow: 0 1px 1px rgba(0,0,0,0.2); }
.adv-button-remove { background-color: #c84038; border-color: #c84038; }
.adv-button-remove:hover { background-color: #a3342d; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.adv-button-remove:active {transform: translateY(0px); box-shadow: 0 1px 1px rgba(0,0,0,0.2); }


/* --- In-Card Action Feedback Message Box (Overlay Style for JS fadeIn/fadeOut) --- */
.adv-card-action-feedback {
    position: absolute;
    top: 10px; /* Distance from the TOP of the card */
    left: 5%;
    right: 5%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.9em;
    text-align: center;
    z-index: 10;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: none; /* Initially hidden */
}
.adv-card-action-feedback.success {
    background-color: rgba(46, 204, 113, 0.9); /* More opaque success Green */
    border: 1px solid rgba(46, 204, 113, 0.95); /* Matching border */
}
.adv-card-action-feedback.error {
    background-color: rgba(231, 76, 60, 0.9); /* More opaque error Red */
    border: 1px solid rgba(231, 76, 60, 0.95); /* Matching border */
}

.adv-no-listings-message {
    color: #888; font-style: italic; padding: 15px; text-align: center;
    background-color: rgba(42, 45, 47, 0.5); 
    border-radius: 6px;
}

/* Responsive adjustments for listing cards */
@media (max-width: 768px) {
    .adv-my-listings-grid { grid-template-columns: 1fr; } 
    .adv-my-listings-column h4 { text-align: center; }
    .adv-listing-card { padding: 12px 15px; } 
    .adv-card-row-middle { flex-wrap: wrap; } 
    .adv-card-field { min-width: 100px; } 
    .adv-card-row-bottom { flex-direction: column; gap: 10px; align-items: stretch; } 
    .adv-card-actions { justify-content: center; } 
    .adv-card-expires { text-align: center; margin-bottom: 5px; }
    .adv-card-action-feedback { /* Adjust for mobile if needed */
        width: calc(100% - 20px); /* Adjust width to fit padding */
        left: 10px;
        right: 10px;
        bottom: 5px; /* Closer to bottom on mobile */
        font-size: 0.85em;
        padding: 8px 10px;
    }
}

/* --- Listing Creation Form Styles (Refined) --- */

/* --- Style for Locked Form Dropdowns --- */
.adv-form-input.is-locked {
    background-color: #303336 !important; /* Matches the readonly input style */
    cursor: default;
    opacity: 0.8;
}

.adv-form-container {
    background-color: #2a2d2f; 
    padding: 25px 30px; /* Slightly more horizontal padding */
    border-radius: 10px; /* Consistent rounding */
    border: 1px solid #444;
    margin-top: 30px;
    color: #e0e0e0; 
}
.adv-form-heading { /* Poppins should be inherited now */
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 30px; /* More space after heading */
    font-size: 1.5em; /* Slightly larger */
    font-weight: 600;
    text-align: left; 
}

.adv-form-grid {
    display: flex;
    flex-wrap: wrap; 
    gap: 25px; /* Consistent gap */
    margin-bottom: 25px;
}

.adv-form-column {
    flex: 1 1 300px; 
    min-width: 260px; /* Adjusted min-width slightly */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Consistent gap between fields in a column */
}

/*
* === REFACTORED LABEL & FIELD STYLES START ===
*/

/* This new rule creates consistent vertical space between labels and inputs */
.adv-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The base style for all form labels. It no longer has a margin. */
.adv-form-label {
    display: block;
    font-size: 0.78em;
    font-weight: 600;
    text-transform: uppercase;
    color: #b0b7c1;
    letter-spacing: 0.06em;
    line-height: 1.4; /* Set an explicit line-height */
}

/* The container for a label that has a counter next to it */
.adv-form-field .adv-label-with-counter {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center the label and counter */
}

/* The character counter element */
.adv-char-counter {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    color: #888;
    line-height: 1.4; /* Match the label's line-height exactly */
}

/*
* === REFACTORED LABEL & FIELD STYLES END ===
*/


/* Unified styling for all input types within the form for height consistency */
.adv-form-input,
.adv-form-container .adv-omnisearch-container .adv-omnisearch-input, /* Target specific omnisearch input */
.adv-form-container select.adv-form-input { /* Target select */
    width: 100%;
    padding: 12px 15px; /* Consistent padding */
    border: 1px solid #4a4f56; /* Slightly more defined border */
    background-color: #1e222e; 
    color: #e0e0e0;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif; /* Ensure Poppins here too */
    font-size: 0.95em; 
    line-height: 1.5;   /* Consistent line height */
    height: 46px; /* Explicit height for better alignment - adjust as needed */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.adv-form-container .adv-omnisearch-container { /* Ensure omnisearch container itself doesn't add weird height */
    margin:0;
    max-width: 100%;
    height: 46px; /* Match input height */
    display: flex; /* Allow input to fill it */
}
.adv-form-container .adv-omnisearch-container .adv-omnisearch-input {
    height: 100%; /* Make input fill the container */
}


.adv-form-input::placeholder,
.adv-form-container .adv-omnisearch-input::placeholder {
    color: #777; /* Adjusted placeholder color */
}
.adv-form-input:focus,
.adv-form-container .adv-omnisearch-input:focus,
.adv-form-container select.adv-form-input:focus {
    border-color: #5865F2; 
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.25);
    outline: none;
    background-color: #25282b;
}

/* Remove spinners from number inputs */
.adv-input-number::-webkit-outer-spin-button,
.adv-input-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.adv-input-number[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

input#adv-listing-ingame-name[readonly] {
    background-color: #303336; /* Slightly different readonly bg */
    cursor: default; 
    opacity: 0.8;
}
input#adv-listing-ingame-name.is-invalid {
    border-color: #e74c3c; /* Brighter red for error */
    background-color: rgba(231, 76, 60, 0.1); 
}
.adv-form-field-notice {
    display: block;
    font-size: 0.8em;
    color: #888;
    margin-top: 5px; /* Increased margin */
}
#adv-ingame-name-notice.error-text {
    color: #e74c3c; 
    font-weight: 500;
}


.adv-form-submit-area {
    display: flex;
    justify-content: flex-end; 
    margin-top: 25px; /* More space before submit button */
}

.adv-form-button {
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 500;
    background-color: #5865F2; 
    color: #ffffff !important;
    border: 1px solid #5865F2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* Refined shadow */
    transition: background-color 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
    cursor: pointer;
    line-height: 1.3; /* Added for consistency */
}
.adv-form-button:hover {
    background-color: #4a58dd;
    transform: translateY(-2px); /* More noticeable lift */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Enhanced shadow on hover */
}
.adv-form-button:active {
    transform: translateY(0px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.adv-form-button:disabled {
    background-color: #4a4d4f;
    color: #888;
    cursor: not-allowed;
    transform: translateY(0px);
    box-shadow: none;
}

.adv-form-feedback-box { 
    margin-top: 20px;
    padding: 15px 20px;
    border-radius: 6px; /* Consistent rounding */
    text-align: center;
    font-size: 1em;
    border-width: 1px;
    border-style: solid;
    color: #EEEEEE; /* Default text color for feedback */
}
.adv-form-feedback-box.success {
    background-color: rgba(46, 204, 113, 0.15); /* Softer green */
    border-color: #2ecc71;
    color: #a0e7af; /* Lighter green text */
}
.adv-form-feedback-box.error {
    background-color: rgba(231, 76, 60, 0.15); /* Softer red */
    border-color: #e74c3c;
    color: #f5a7a1; /* Lighter red text */
}

.adv-form-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px; /* Was on h3, moved here */
    border-bottom: 1px solid #555;
    padding-bottom: 15px;
}

.adv-form-heading { 
    color: #ffffff;
    margin: 0; /* Removed margin as it's on header-bar now */
    font-size: 1.5em; 
    font-weight: 600;
    text-align: left; 
    font-family: 'Poppins', sans-serif; /* Explicit Poppins */
}

/* Buy/Sell Toggle Button Styles */
.adv-form-header-bar { /* Ensure this parent has styles from previous steps if needed */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ... other styles for margin-bottom, border-bottom, padding-bottom ... */
}

.adv-listing-type-toggle {
    display: flex;
    border: 1px solid #444; 
    border-radius: 6px; 
    overflow: hidden; 
}

.adv-listing-type-toggle .adv-toggle-btn {
    background-color: #2a2d2f; /* Dark bg for inactive */
    color: #a0a0a0;            /* Muted text for inactive */
    padding: 8px 15px;
    border: none; 
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85em;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    outline: none;
    line-height: 1.2; /* Added for consistency */
}

/* Separator line between the two buttons */
.adv-listing-type-toggle .adv-toggle-btn[data-type="sell"] { /* Target specifically if it's always first */
    border-right: 1px solid #444; 
}
/* Or if order might change, use :first-child if it's always the first physical button */
/* .adv-listing-type-toggle .adv-toggle-btn:first-child {
    border-right: 1px solid #444; 
} */


/* Hover state for INACTIVE buttons */
.adv-listing-type-toggle .adv-toggle-btn:not(.active):hover {
    background-color: #3a3f44; 
    color: #e0e0e0;
}

/* --- UPDATED ACTIVE STATE STYLES --- */
/* Remove generic .active style if it was:
.adv-listing-type-toggle .adv-toggle-btn.active {
    background-color: #5865F2; 
    color: #ffffff;
}
*/

/* Active state for SELL button */
.adv-listing-type-toggle .adv-toggle-btn[data-type="sell"].active {
    background-color: #c84038; /* Reddish background */
    color: #ffffff;            /* White text */
    font-weight: 600;          /* Slightly bolder when active */
}

/* Active state for BUY button */
.adv-listing-type-toggle .adv-toggle-btn[data-type="buy"].active {
    background-color: #38a86a; /* Greenish background */
    color: #ffffff;            /* White text */
    font-weight: 600;          /* Slightly bolder when active */
}

.adv-form-grid {
    display: flex;
    flex-wrap: wrap; 
    gap: 25px; /* Consistent gap */
    margin-bottom: 25px;
}

.adv-form-column {
    flex: 1 1 300px; 
    min-width: 260px; /* Adjusted min-width slightly */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Consistent gap between fields in a column */
}

.adv-form-field .adv-label-with-counter {
    display: flex;
    justify-content: space-between;
    align-items: center; /* This ensures vertical centering */
}

#adv-listing-price::placeholder { content: ""; } /* Effectively removes it */
#adv-listing-quantity::placeholder { /* JS might be better if you need translated "Max 999" */ }


/* --- Login Error Page Styles --- */
.adv-login-error-message-container {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    text-align: center; /* Ensures content within is centered */
    padding: 40px 20px;
    margin: 50px auto;
    max-width: 600px;
    background-color: #2a2d2f; 
    color: #EEEEEE;       /* <<<< CHANGED TEXT COLOR HERE */
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.adv-login-error-text {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 0; /* Remove bottom margin as button is gone */
    color: #EEEEEE; /* Explicitly set here too for clarity */
}

/* Remove .adv-login-error-button styles as the button is removed */

/* --- STYLES TO REMOVE --- */
/*
.adv-user-greeting-wrapper {
    width: 100%; 
}

.adv-user-greeting-label { 
    display: block; 
    font-size: 0.8em; 
    font-weight: 600;
    text-transform: uppercase;
    color: #b0b7c1; 
    letter-spacing: 0.06em;
    margin-bottom: 6px; 
}
*/
/* --- END OF STYLES TO REMOVE --- */

.adv-user-menu-buttons {
    display: flex; 
    align-items: center;
    justify-content: center; 
    gap: 10px; 
}

/* .adv-user-menu-button and its variants (.adv-button-login-discord, .adv-button-dashboard, .adv-button-logout) */
/* styles remain the same as the "Actual Button Look" version you liked previously. */
.adv-user-menu-button {
    display: inline-block;
    padding: 9px 18px; 
    border-radius: 6px;   
    text-decoration: none !important; 
    font-size: 0.9em;    
    font-weight: 500;
    line-height: 1.2;      
    text-align: center;
    cursor: pointer;
    border: 1px solid #555a61; 
    background-color: #3a3f44; 
    color: #e0e0e0;       
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05); 
    transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out, transform 0.1s ease-out, box-shadow 0.15s ease-out;
}
.adv-user-menu-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07);
}
.adv-user-menu-button:active {
    transform: translateY(0px);
    box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
}

.adv-button-login-discord {
    background-color: #5865F2; border-color: #5865F2; color: #ffffff;
}
.adv-button-login-discord:hover { background-color: #4a58dd; border-color: #4a58dd; color: #ffffff; }
.adv-button-login-discord:active { background-color: #404dbf; }

.adv-button-dashboard {
    background-color: #4f545c; border-color: #656b74; color: #e8e6e3;
}
.adv-button-dashboard:hover { background-color: #5a6069; border-color: #70757d; color: #ffffff; }
.adv-button-dashboard:active { background-color: #454a50; }

.adv-button-logout {
    background-color: #303336; border-color: #45494e; color: #b0b0b0; 
}
.adv-button-logout:hover { background-color: #c94c4c; border-color: #a93c3c; color: #ffffff; }
.adv-button-logout:active { background-color: #b03030; }

/* Global Font & Box Sizing for Plugin Elements */
.adv-omnisearch-container,
.adv-omnisearch-container input,
.adv-omnisearch-results a,
.adv-omnisearch-results span, /* For messages in dropdown */
.adv-item-page-container,
.adv-item-page-container *, /* Apply Poppins and box-sizing broadly within item page */
.adv-item-page-container *:before,
.adv-item-page-container *:after {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    box-sizing: border-box;
}

/* --- Item Page - Section Titles & Orderbook --- */

/* --- Create Listing Button on Single Item Page --- */
/* --- Orderbook Column Header (for h3 and Create button) --- */
.adv-orderbook-column-header {
    display: flex;
    justify-content: space-between; /* Pushes h3 to left, button to right */
    align-items: center;
    margin-bottom: 15px; /* Same as h3's original margin-bottom */
    /* If your h3 had other styles like border-bottom, they might need to be applied here or adjusted */
}

.adv-orderbook-column-header h3 {
    margin-bottom: 0; /* Remove bottom margin from h3 as header div handles it */
    /* font-size: 1.3em; /* From existing .adv-orderbook-column h3 */
    /* color: #e0e0e0; /* From existing */
    /* border-bottom: none; /* If h3 had a border, move it to .adv-orderbook-column-header or remove */
    /* padding-bottom: 0; */
}

/* --- New "Create Listing" Button in Orderbook --- */
.adv-button-orderbook-create-listing {
    padding: 5px 10px; /* Smaller padding */
    font-size: 0.8em;  /* Smaller font size */
    font-weight: 500;
    color: #e0e0e0;
    background-color: #4f545c; /* A neutral, less prominent color than primary */
    border: 1px solid #656b74;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
    transition: background-color 0.15s ease-out, transform 0.1s ease-out, border-color 0.15s ease-out;
}

.adv-button-orderbook-create-listing:hover {
    background-color: #5a6069;
    border-color: #70757d;
    color: #ffffff;
    transform: translateY(-1px);
}

.adv-button-orderbook-create-listing:active {
    background-color: #454a50; /* Darker for active state */
    border-color: #454a50;
    transform: translateY(0px);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}


.adv-modal {
    display: none; 
    position: fixed; 
    z-index: 1001; /* Higher than other elements */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.6); /* Dim background */
    padding-top: 60px; /* Space from top */
}

.adv-modal-content {
    background-color: #2a2d2f; /* Dark background for modal content */
    color: #e0e0e0;
    margin: 5% auto; 
    padding: 25px 30px;
    border: 1px solid #444;
    border-radius: 10px;
    width: 80%; 
    max-width: 700px; /* Max width of the modal */
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: adv-modal-animate-top 0.4s;
}

@keyframes adv-modal-animate-top {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

.adv-modal-close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}

.adv-modal-close-btn:hover,
.adv-modal-close-btn:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* Ensure the form inside the modal takes appropriate width */
.adv-modal-content .adv-listing-creation-form-wrapper {
    margin-top: 15px;
}
.adv-modal-content .adv-form-heading { /* Adjust heading if needed inside modal */
    font-size: 1.3em; 
    margin-bottom: 20px;
}

.adv-item-page-container .adv-section-title { /* Common style for main section titles on item page */
    font-size: 1.8em;
    font-weight: 600;
    color: #ffffff;
    margin-top: 40px; 
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #5865F2; 
    text-align: left;
    padding-left: 0; /* Remove padding if container handles it */
}
.adv-item-page-container .adv-section-title:first-of-type { /* e.g. Orderbook if it's first after header */
    margin-top: 10px; /* Less top margin for the very first section */
}
.adv-title-source-note {
    font-size: 0.5em; /* Smaller font */
    text-transform: uppercase; /* All caps */
    color: #a0a0a0; /* Muted color */
    font-weight: 500;
    margin-left: 10px;
    vertical-align: middle;
}

.adv-itempage-listings-section .adv-orderbook-columns {
    display: flex;
    flex-wrap: wrap; /* Allow stacking on small screens */
    gap: 30px; /* Gap between Sell and Buy columns */
}
.adv-itempage-listings-section .adv-orderbook-column {
    flex: 1 1 calc(50% - 15px); /* Each column takes half, accounting for gap */
    min-width: 300px; /* Minimum width before stacking */
}
.adv-itempage-listings-section .adv-orderbook-column h3 { /* Sell Orders / Buy Orders headings */
    font-size: 1.3em;
    color: #e0e0e0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #444;
}
.adv-itempage-listings-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between cards in a list */
}

/* --- Item Page Orderbook Filters --- */

.adv-listings-filter-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
    padding: 15px;
    background-color: rgba(42, 45, 47, 0.7);
    border-radius: 8px;
    border: 1px solid #333;
}

.adv-filter-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.adv-sort-filter-bubbles {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #2a2d2f;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 8px;
}

.adv-sort-filter-bubbles .adv-filter-bubble {
    padding: 6px 12px;
    border-radius: 25px;
    font-size: 0.85em;
    font-weight: 500;
    color: #a0a0a0;
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

.adv-sort-filter-bubbles .adv-filter-bubble:not(.active):hover {
    color: #e0e0e0;
    background-color: #3a3f44;
}

.adv-sort-filter-bubbles .adv-filter-bubble.active {
    color: #ffffff;
    background-color: #5865F2;
    border-color: #5865F2;
    font-weight: 600;
}

.adv-listings-filter-controls label {
    width: 100%;
    text-align: left;
    margin-right: 0; /* Gap is now handled by the parent container */
    font-weight: 500;
    color: #c0c0c0;
    font-size: 0.85em;
    text-transform: uppercase;
    flex-shrink: 0; /* Prevents the label from shrinking */
}

/* Remove margin from the bubble container when it's inside the new controls */
.adv-listings-filter-controls .adv-orderbook-filter-container {
    margin-bottom: 0;
}

.adv-orderbook-filter-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.adv-quality-filter-bubbles {
    display: flex; /* Changed from inline-flex */
    flex-wrap: wrap; /* This is the key change */
    justify-content: center; /* Center the bubbles within their container */
    align-items: center;
    gap: 8px;
    background-color: #2a2d2f;
    border: 1px solid #444;
    border-radius: 12px; /* Adjusted for a slightly more modern look */
    padding: 8px;
}
.adv-quality-filter-bubbles .adv-filter-bubble {
    padding: 6px 12px;
    border-radius: 25px;
    font-size: 0.85em;
    font-weight: 600;
    color: #a0a0a0;
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}
.adv-quality-filter-bubbles .adv-filter-bubble:not(.active):hover {
    color: #e0e0e0;
    background-color: #3a3f44;
}
.adv-quality-filter-bubbles .adv-filter-bubble.active {
    color: #ffffff;
    background-color: #5865F2;
    border-color: #5865F2;
}

/* --- Refresh Button --- */
#adv-refresh-listings-button {
    background-color: #3a3f44; /* Use the same background as the other bubbles' hover state */
    color: #e0e0e0;
    font-weight: 500; /* Match the default font-weight of the other bubbles */
    border: 1px solid #444; /* Add a subtle border to make it feel more tangible */
}
#adv-refresh-listings-button:hover {
    background-color: #4f545c; /* Darken slightly on hover */
    color: #ffffff;
    border-color: #656b74;
}

/* --- Item Page Apply Filters Button --- */
.adv-apply-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin-left: 8px;
    background-color: #1abc9c;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.adv-apply-filters-btn:hover {
    background-color: #16a085;
    transform: scale(1.1);
}

.adv-apply-filters-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* --- Item Page Action Button Container --- */
.adv-action-button-container {
    display: flex;
    align-items: center;
    background-color: #2a2d2f;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 8px;
}

.adv-action-button {
    padding: 6px 12px;
    border-radius: 25px;
    font-size: 0.85em;
    font-weight: 500;
    color: #a0a0a0;
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
    background-color: #4f545c;
    color: #e0e0e0;
}

.adv-action-button:hover {
    background-color: #5a6069;
    color: #ffffff;
}

/* === Item Page Listing Card Styles === */
.adv-itempage-listing-card {
    display: flex;
    align-items: center;
    gap: 10px; /* Reduced gap to move col2 (and price) further left */
    background-color: #25282b; 
    border: 1px solid #383d42;
    border-radius: 8px; 
    padding: 12px 15px; 
    color: #c0c0c0;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.adv-itempage-listing-card:hover {
    background-color: #2c3034;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Border indicator for listing type */
.adv-itempage-listing-card.adv-listing-type-sell { 
    border-left: 4px solid #c84038; 
}
.adv-itempage-listing-card.adv-listing-type-buy { 
    border-left: 4px solid #38a86a; 
}

/* Column 1: Ingame Name & Note */
.adv-itempage-listing-card .adv-itempage-card-col1 {
    flex-grow: 1; 
    min-width: 0; 
    display: flex;
    flex-direction: column;
    gap: 3px; 
    align-self: flex-start; 
}

.adv-itempage-listing-card .adv-itempage-card-ingame-name {
    font-size: 1em; 
    font-weight: 600;
    color: #e8e8e8; 
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adv-itempage-listing-card .adv-itempage-card-note { /* Quotation marks removed via PHP */
    font-size: 0.8em;
    color: #9098a1;
    font-style: italic;
    white-space: normal; /* Allow text to wrap */
    word-break: break-word; /* Break long words to prevent overflow */
    line-height: 1.4; /* Increased line-height for better readability */
}

/* Column 2: Price & Quantity Fields */
.adv-itempage-listing-card .adv-itempage-card-col2 {
    display: flex;
    flex-direction: row; 
    gap: 15px; 
    flex-shrink: 0; 
    align-items: flex-start; 
}

.adv-itempage-listing-card .adv-itempage-card-field {
    display: flex;
    flex-direction: column; 
    text-align: left; 
}

.adv-itempage-listing-card .adv-itempage-card-label {
    font-size: 0.65em; 
    font-weight: 600;
    text-transform: uppercase;
    color: #8a95a1; 
    margin-bottom: 3px;
    letter-spacing: 0.06em;
    line-height: 1.1;
}

.adv-itempage-listing-card .adv-itempage-card-value {
    font-size: 0.9em; 
    color: #d0d6db; 
    font-weight: 500;
}

.adv-itempage-listing-card .adv-itempage-card-value.price-value {
    font-size: 0.9em; 
    font-weight: 600;
    color: #ffffff; 
}

/* Discord DM Button */
.adv-itempage-listing-card .adv-card-discord-dm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Center content */
    min-width: 95px; /* Set a minimum width */
    background-color: #5865F2;
    color: #ffffff !important;
    padding: 7px 12px; 
    border-radius: 5px; 
    font-size: 0.85em; 
    font-weight: 500;
    text-decoration: none;
    margin-left: auto; 
    flex-shrink: 0; 
    transition: background-color 0.15s ease, transform 0.1s ease;
    border: none;
    white-space: nowrap; 
}

.adv-itempage-listing-card .adv-card-discord-dm-button:hover {
    background-color: #4a58dd; 
    transform: translateY(-1px);
}

.adv-itempage-listing-card .adv-card-discord-dm-button .fa-discord {
    font-size: 1.1em; 
    line-height: 1; 
}

/* Styles for the "Yours" button on the item page order book */
.adv-card-own-listing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 95px; /* Set a minimum width */
    background-color: #4f545c;
    color: #a0a7b1;
    padding: 7px 12px;
    border-radius: 5px;
    font-size: 0.85em;
    font-weight: 500;
    text-decoration: none;
    margin-left: auto;
    flex-shrink: 0;
    border: 1px solid #656b74;
    cursor: default;
    white-space: nowrap;
    box-shadow: none;
    user-select: none;
}

/* Responsive Adjustments for Item Page Cards */
@media (max-width: 600px) {
    .adv-itempage-listing-card {
        flex-direction: column; 
        align-items: stretch; 
        gap: 10px;
    }

    /* Allow the main content area to wrap its items for mobile */
    .adv-itempage-listing-card .adv-itempage-card-main-content {
        flex-wrap: wrap;
        row-gap: 15px; /* Add space when items wrap */
    }

    .adv-itempage-listing-card .adv-itempage-card-col1 {
        align-self: stretch; 
    }
    
    .adv-itempage-listing-card .adv-itempage-card-col2 {
        flex-direction: row; 
        justify-content: space-between; 
        width: 100%; 
        gap: 10px;
    }
    .adv-itempage-listing-card .adv-itempage-card-col2 .adv-itempage-card-field {
        flex-grow: 1; 
        min-width: 80px; 
    }

    /* Position Message button at the bottom for mobile */
    .adv-itempage-listing-card .adv-card-discord-dm-button,
    .adv-itempage-listing-card .adv-card-own-listing-button {
        flex-basis: 100%; /* Make the button take full width to force it to a new line */
        justify-content: center; /* Center the text inside the button */
        margin: 5px 0 0 0; /* Reset margins and add a top margin */
        order: 99; /* Force it to be the last item in the flex container */
        visibility: visible; /* Ensure it is visible */
        display: inline-flex; /* Ensure it is displayed */
    }
}

@media (max-width: 400px) {
    .adv-itempage-listing-card .adv-itempage-card-col2 {
        flex-direction: column; 
        align-items: flex-start; 
        gap: 8px;
    }
    .adv-itempage-listing-card .adv-itempage-card-col2 .adv-itempage-card-field {
        min-width: 100%; 
    }
}

.adv-load-more-listings-button {
    display: block; /* Take full width of its column */
    width: calc(100% - 10px); /* Slightly less than full for aesthetics */
    margin: 15px auto 5px auto; /* Centered with vertical margin */
    padding: 8px 15px;
    font-size: 0.9em;
    font-weight: 500;
    color: #e0e0e0;
    background-color: #3a3f44;
    border: 1px solid #555a61;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
}
.adv-load-more-listings-button:hover {
    background-color: #4f545c;
}
.adv-load-more-listings-button:disabled {
    background-color: #2a2d2f;
    color: #666;
    cursor: not-allowed;
}

/* --- End of Item Page Listing Card Styles --- */

/* --- Omnisearch Bar - Revised Dark Theme (Used by shortcode and item page secondary search) --- */
.adv-omnisearch-container {
    position: relative;
    margin: 20px auto 30px auto; 
    max-width: 700px; 
}

.adv-omnisearch-input {
    width: 100%;
    padding: 14px 20px;
    border: 1px solid #444; 
    background-color: #2a2d2f; 
    color: #e0e0e0; 
    border-radius: 25px;       
    font-size: 16px;
    text-align: left;          
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Default container styles for the homepage omnisearch on small screens */
.searchbar-minwidth-wrapper {
    width: 100%; /* On small screens, take up the full available width */
    max-width: 700px; /* But don't get wider than 700px */
    margin: 10px auto 10px auto;
}

/* For screens wide enough to comfortably fit the search bar (e.g., tablets and desktops) */
@media (min-width: 768px) {
    .searchbar-minwidth-wrapper {
        width: 700px; /* Enforce the 700px width */
    }
}

.adv-omnisearch-input::placeholder {
    color: #888; 
    font-weight: 400;
}
.adv-omnisearch-input:focus {
    border-color: #5865F2; 
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.35); 
    outline: none;
    background-color: #303336; 
}
.adv-omnisearch-input.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='20' height='20' style='shape-rendering: auto; display: block; background: transparent;' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Ccircle cx='50' cy='50' r='32' stroke-width='8' stroke='%235865f2' stroke-dasharray='50.26548245743669 50.26548245743669' fill='none' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='1s' repeatCount='indefinite' keyTimes='0;1' values='0 50 50;360 50 50'%3E%3C/animateTransform%3E%3C/circle%3E%3Cg%3E%3C/g%3E%3C/g%3E%3C!-- %2Freact-text --%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px 20px;
    padding-right: 45px; 
}

.adv-omnisearch-results {
    position: absolute;
    top: calc(100% + 5px); 
    left: 0;
    right: 0;
    background-color: #2a2d2f; 
    border: 1px solid #444;    
    border-top: none; 
    border-radius: 0 0 15px 15px; 
    z-index: 1000;
    max-height: 350px;
    overflow-y: auto;
    display: none; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.3); 
}
.adv-omnisearch-results ul {
    list-style: none;
    margin: 0;
    padding: 0; 
}
.adv-omnisearch-results li a {
    display: block; 
    padding: 10px 15px;
    text-decoration: none;
    color: #d0d0d0; 
    border-bottom: 1px solid #383b3d; 
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    font-weight: 400; 
    line-height: 1.4; 
}
.adv-omnisearch-results li:last-child a {
    border-bottom: none;
    border-radius: 0 0 14px 14px; 
}
.adv-omnisearch-results li a:hover {
    background-color: #5865F2; 
    color: #ffffff; 
}
.adv-search-item-icon {
    width: 28px; 
    height: 28px;
    margin-right: 10px;
    object-fit: contain;
    display: inline-block;    
    vertical-align: middle; 
}
.adv-omnisearch-results ul li span { /* For "Loading...", "No items" messages */
    padding: 10px 15px;
    display: block;
    color: #888; 
    font-style: italic;
    text-align: center;
}

/* --- Item Page Search Dropdown Filters --- */
.adv-itempage-dropdown-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.adv-itempage-filter-select {
    flex: 1; /* Each dropdown takes equal space */
    padding: 8px 12px;
    font-size: 0.9em;
    font-weight: 500;
    color: #c0c0c0;
    background-color: #2a2d2f;
    border: 1px solid #444;
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23c0c0c0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.adv-itempage-filter-select:focus {
    border-color: #5865F2; 
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.25);
    outline: none;
}

/* --- Omnisearch Filters --- */

.adv-omnisearch-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.adv-filter-group {
    display: flex;
    align-items: center;
}

.adv-filter-bubbles {
    display: flex;
    align-items: center;
    background-color: #2a2d2f;
    border: 1px solid #444;
    border-radius: 20px;
    padding: 3px;
    position: relative; /* Crucial for the animation */
}

/* This is the new sliding bubble element */
.adv-filter-bubbles::before {
    content: '';
    position: absolute;
    /* These custom properties are now all set by JavaScript */
    left: var(--bubble-left, 0);
    width: var(--bubble-width, 0);
    top: var(--bubble-top, 3px);
    height: var(--bubble-height, calc(100% - 6px));
    background-color: #5865F2;
    border-radius: 18px;
    /* Add top and height to the transition for smooth vertical movement */
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 0;
}

.adv-filter-bubble {
    padding: 5px 12px; /* Restored larger padding */
    border-radius: 15px;
    font-size: 0.8em; /* Restored larger font size */
    font-weight: 500;
    color: #c0c0c0;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1; /* Keep text on top of the sliding bubble */
    position: relative;
    white-space: nowrap;
}

.adv-filter-bubble.active {
    color: #ffffff; /* Active text is white */
}

.adv-filter-bubble:not(.active):hover {
    color: #ffffff;
}

.adv-omnisearch-input {
    border-radius: 8px; 
}

/* --- Responsive Styles for Omnisearch Filters on Mobile --- */
@media (max-width: 767px) {
    .adv-omnisearch-filters {
        flex-direction: column; /* This is the key change: it stacks the filter groups vertically */
        overflow-x: visible;    /* Removes the horizontal scrollbar on mobile */
        align-items: center;    /* Ensures the stacked groups are centered */
        gap: 10px;              /* Adjusts the vertical gap between the stacked groups */
    }

    .adv-filter-group {
        width: 100%;            /* Allows each filter group to take the full width */
        justify-content: center;/* Centers the bubble container within its group */
    }

    /* Optional: Allows bubbles inside a group to wrap if the screen is extremely narrow */
    .adv-filter-bubbles {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px; /* Adds a small gap if the bubbles wrap */
    }
}


/* --- Item Detail Page - Dark Theme --- */
.adv-item-page-container {
    background-color: #181a1b; 
    color: #e8e6e3; 
    padding: 30px 20px;
    margin: 0 auto; 
    max-width: 1200px; 
    border-radius: 0; 
    box-shadow: none; 
}

/* Item Page Header - Two Halves Layout */
.adv-item-info-header {
    display: flex;
    flex-wrap: nowrap; 
    justify-content: space-between; 
    align-items: flex-start; 
    gap: 30px; 
    margin-bottom: 40px;
}

/* Left Half: Contains icon and all text details */
.adv-item-details-left {
    display: flex; 
    align-items: flex-start;
    gap: 20px; 
    flex: 1 1 auto; /* Let it take available space, but can shrink. ~60-65% idea */
    min-width: 0; 
}
.adv-item-main-icon-wrapper {
    flex-shrink: 0; 
}
.adv-item-main-icon {
    width: 100px; 
    height: 100px;
    object-fit: contain;
    border: 1px solid #444; 
    border-radius: 8px;
    background-color: #2a2d2f; 
    padding: 5px;
}
.adv-item-name-server {
    display: flex;
    flex-direction: column; 
    min-width: 0; 
}
.adv-item-name-server h1.entry-title {
    font-size: 2.2em;
    font-weight: 600;
    color: #ffffff; 
    margin: 0 0 5px 0;
    line-height: 1.2;
}
.adv-item-server-name {
    font-size: 0.9em;
    font-weight: 500;
    text-transform: uppercase;
    color: #a0a0a0; 
    letter-spacing: 0.5px;
}
.adv-item-description { 
    margin-top: 10px;
}
.adv-item-description p { 
    font-size: 0.9em; 
    color: #b0b0b0; 
    line-height: 1.6;
    text-align: left; 
    margin: 0; 
}

/* Right Half: Secondary Search Section */
.adv-itempage-search-section {
    display: none; /* Hidden by default, shown on PC via media query */
    flex: 0 0 300px;  /* Give it a base width, don't grow, don't shrink from this */
    max-width: 35%;   /* Ensure it doesn't get too large relative to parent */
}
.adv-itempage-search-label {
    display: block;
    font-size: 0.65em; 
    font-weight: 600;
    text-transform: uppercase;
    color: #a0a0a0; 
    margin-bottom: 6px;
    letter-spacing: 0.075em;
    text-align: left; 
}
.adv-itempage-search-section .adv-omnisearch-container {
    margin: 0; 
    max-width: 100%; 
}
.adv-itempage-search-section .adv-omnisearch-input {
    margin-bottom: 0; 
}
.adv-itempage-search-section .adv-omnisearch-results {
    width: 100%; 
}


/* City Data Grid (Current Prices) */

.adv-current-prices h2, 
.adv-price-history h2 { 
    font-size: 1.8em; font-weight: 600; color: #ffffff;
    margin-top: 40px; margin-bottom: 25px; padding-bottom: 10px;
    border-bottom: 2px solid #5865F2; text-align: left;
    padding-left: 10px;
}
.adv-current-prices h2:first-child,
.adv-price-history h2:first-child { margin-top: 0; }

.adv-city-price-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 25px; padding: 0 10px; 
}
/* --- City Price Grid Color-Coding --- */
.adv-city-cell {
    /* Base style for all cells */
    border-radius: 8px;
    border: 1px solid #383d42;
    background-color: #25282b;
    border-left-width: 5px; /* Prepare for the colored border */
    border-left-style: solid;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    padding: 7px;
}

/* --- Individual City Colors --- */
.adv-city-cell.city-caerleon {
    border-left-color: #7d1d0e;
    background-color: rgba(125, 29, 14, 0.1);
}
.adv-city-cell.city-lymhurst {
    border-left-color: #576930;
    background-color: rgba(87, 105, 48, 0.1);
}
.adv-city-cell.city-martlock {
    border-left-color: #345574;
    background-color: rgba(52, 85, 116, 0.1);
}
.adv-city-cell.city-bridgewatch {
    border-left-color: #df9a5c;
    background-color: rgba(223, 154, 92, 0.1);
}
.adv-city-cell.city-thetford {
    border-left-color: #715170;
    background-color: rgba(113, 81, 112, 0.1);
}
.adv-city-cell.city-fort-sterling {
    border-left-color: #a0a0a0; /* Using a darker grey for the border for visibility */
    background-color: rgba(216, 216, 216, 0.05);
}
.adv-city-cell.city-brecilien {
    border-left-color: #bda4d0;
    background-color: rgba(189, 164, 208, 0.1);
}

/* --- Hover Effect --- */
.adv-city-cell.city-caerleon:hover { background-color: rgba(125, 29, 14, 0.2); }
.adv-city-cell.city-lymhurst:hover { background-color: rgba(87, 105, 48, 0.2); }
.adv-city-cell.city-martlock:hover { background-color: rgba(52, 85, 116, 0.2); }
.adv-city-cell.city-bridgewatch:hover { background-color: rgba(223, 154, 92, 0.2); }
.adv-city-cell.city-thetford:hover { background-color: rgba(113, 81, 112, 0.2); }
.adv-city-cell.city-fort-sterling:hover { background-color: rgba(216, 216, 216, 0.1); }
.adv-city-cell.city-brecilien:hover { background-color: rgba(189, 164, 208, 0.2); }

.adv-city-name {
    font-size: 1.3em; font-weight: 600; color: #ffffff; margin-bottom: 15px;
}
.adv-price-types { display: flex; gap: 20px; margin-bottom: 8px; }
.adv-price-type-label {
    font-size: 0.75em; font-weight: 600; text-transform: uppercase;
    color: #a0a0a0; letter-spacing: 0.5px; flex: 1; 
}
.adv-prices { display: flex; gap: 20px; align-items: baseline; margin-bottom: 5px; }
.adv-price-value { font-size: 1.5em; font-weight: 500; color: #ffffff; flex: 1; }
.adv-price-value .no-data { font-size: 0.9em; font-style: italic; color: #777;}
.adv-price-value .silver-icon { margin-left: 4px; /* Add SVG or image here */ }
.adv-price-age { display: flex; gap: 20px; }
.adv-price-age span { font-size: 0.8em; color: #888; flex: 1; }

/* Chart Section */
.adv-chart-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-end; /* Aligns items to the bottom, looks nice with the button */
    margin-bottom: 25px;
    padding: 15px;
    background-color: rgba(42, 45, 47, 0.7);
    border-radius: 8px;
    border: 1px solid #333;
    margin-left: 10px;
    margin-right: 10px;
}
/* This new rule targets the div wrapping each control */
.adv-chart-controls > div {
    display: flex;
    flex-direction: column; /* This is the key fix: it stacks the label above the select */
    gap: 6px; /* Creates space between the label and its control */
}
.adv-chart-controls label {
    font-weight: 500;
    color: #c0c0c0;
    font-size: 0.85em;
    text-transform: uppercase;
    margin-right: 0; /* Margin is no longer needed */
}
.adv-chart-controls select,
.adv-chart-controls button { /* Combined base style */
    padding: 9px 14px; border: 1px solid #444; 
    border-radius: 18px; font-size: 0.9em;
    background-color: #2a2d2f; color: #e0e0e0; 
}
.adv-chart-controls select { min-width: 150px; }
.adv-chart-controls select:focus { /* Specific focus for select */
    border-color: #5865F2; box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3); outline: none;
}
/* Button specific styles are below in Animated Button section or merged */


.adv-chart-container {
    width: calc(100% - 20px); min-height: 400px; height: 50vh; max-height: 550px; 
    background: transparent; padding: 0; border: none; box-shadow: none; 
    margin-left: 10px; margin-right: 10px;
}
#adv-chart-status { 
    text-align: center; padding: 20px 15px; font-size: 1em; color: #aaa; 
    width: auto; max-width: calc(100% - 40px); margin: 20px auto; 
    border-radius: 8px; background-color: rgba(42, 45, 47, 0.7); 
    border: 1px solid #333; display: none; 
}

/* --- Animated Button for Chart Update --- */
.adv-chart-controls button#adv-update-chart-button { /* Target the specific button */
    position: relative;
    overflow: hidden; 
    min-width: 150px; 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    background-color: #5865F2; /* Base color from example */
    color: white; 
    box-shadow: 0 2px 4px rgba(88, 101, 242, 0.2);
    font-weight: 500; /* From example */
    text-decoration: none; /* From example */
    cursor: pointer; /* Base style */
    border: none; /* Override default button border */
    /* transition from .adv-chart-controls button applies if not overridden here for specific props */
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: auto;
    min-height: 42px;
}
#adv-update-chart-button .adv-button-text,
#adv-update-chart-button .adv-button-icon {
    display: flex; 
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    will-change: opacity, transform; 
}
#adv-update-chart-button .adv-button-icon {
    opacity: 0; 
    position: absolute; 
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0.7); 
    color: white; 
}
#adv-update-chart-button:hover .adv-button-text {
    opacity: 0;
    transform: scale(0.7);
}
#adv-update-chart-button:hover .adv-button-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.adv-chart-controls button#adv-update-chart-button:hover { 
    background-color: #4752C4; 
    transform: translateY(-1px); 
    box-shadow: 0 4px 8px rgba(88, 101, 242, 0.3);
}
.adv-chart-controls button#adv-update-chart-button:disabled {
    background-color: #4a4d4f;
    color: #888;
    box-shadow: none;
    transform: translateY(0px);
    cursor: not-allowed;
}
.adv-chart-controls button#adv-update-chart-button:disabled:hover .adv-button-text {
    opacity: 1; transform: scale(1);
}
.adv-chart-controls button#adv-update-chart-button:disabled:hover .adv-button-icon {
    opacity: 0; transform: translate(-50%, -50%) scale(0.7);
}


/* --- Responsive adjustments --- */
@media (min-width: 992px) { 
    .adv-itempage-search-section {
        display: block; /* Show secondary search on PC */
    }
}

@media (max-width: 991.98px) { 
    .adv-item-info-header {
        flex-direction: column; 
        align-items: center;    
        text-align: center;     
    }
    .adv-item-details-left {
        flex-basis: 100%;       
        width: 100%;
        flex-direction: column; 
        align-items: center;    
        gap: 15px;
        margin-bottom: 20px; 
    }
    .adv-item-name-server { /* Ensure text elements within also center if parent is centered */
        align-items: center;
    }
    .adv-item-description {
        margin-left: auto; /* Center if max-width is less than container */
        margin-right: auto;
        max-width: 90%; 
    }
    .adv-item-description p {
        text-align: center; 
    }
    .adv-itempage-search-section { /* Ensure it's hidden on tablet portrait and below */
        display: none !important; 
    }

    /* Adjustments for stacked controls on tablet */
    .adv-chart-controls {
        flex-direction: column; align-items: stretch; padding: 15px;
        margin-left: 0; margin-right: 0;
    }
    .adv-chart-controls > div, 
    .adv-chart-controls > label, /* Should be part of a div or target specific labels */
    .adv-chart-controls > select,
    .adv-chart-controls > button { 
        width: 100%; margin-bottom: 10px; 
    }
    .adv-chart-controls > div:last-child,
    .adv-chart-controls > *:last-child { margin-bottom: 0; }
    .adv-chart-controls label { margin-bottom: 4px; display: block; } /* For labels not in a div */
}


@media (max-width: 768px) {
    /* Keep existing responsive styles, ensure they don't conflict */
    .adv-item-page-container {
        padding: 20px 10px;
    }
    .adv-item-name-server h1.entry-title {
        font-size: 1.8em;
    }
    .adv-current-prices h2, .adv-price-history h2 {
        font-size: 1.5em;
        text-align: center; 
        padding-left: 0; margin-left: 0; margin-right: 0;
    }
    .adv-city-price-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
        gap: 20px; padding: 0;
    }
    .adv-city-cell {
        padding: 15px; background-color: rgba(35, 38, 39, 0.5); border-radius: 8px;
    }
    .adv-chart-container { margin-left: 0; margin-right: 0; width: 100%; }
    #adv-chart-status { max-width: calc(100% - 20px); }
}

@media (max-width: 480px) {
    .adv-omnisearch-input { font-size: 15px; padding: 12px 18px; }
    .adv-omnisearch-results li a { padding: 10px 18px; }
    .adv-item-page-container { padding: 15px 5px; }
    .adv-item-name-server h1.entry-title { font-size: 1.6em; }
    .adv-current-prices h2, .adv-price-history h2 { font-size: 1.3em; }
    .adv-chart-controls select,
    .adv-chart-controls button { padding: 9px 12px; font-size: 0.85em; }
}

/* Styling for the Orderbook Title and Create Button */
.adv-orderbook-title-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444; /* Optional: adds a nice separator line */
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.adv-orderbook-title-header h3 {
    font-size: 1.2em;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* You may need to adjust the button style slightly if it has large margins */
.adv-orderbook-header-actions .adv-button-orderbook-create-listing {
    /* Example: remove margin if it's pushing things out of alignment */
    margin: 0; 
}

/* --- My Offers Section --- */
.adv-my-offers-section {
    margin-top: 40px;
    padding-top: 30px;
    color: #e0e0e0;
}
.adv-my-offers-section h3 {
    font-size: 1.6em;
    color: #ffffff;
    margin-bottom: 25px;
    font-weight: 600;
    text-align: left;
}
.adv-my-offers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
.adv-my-offers-column h4 {
    font-size: 1.3em;
    color: #e8e6e3;
    margin-bottom: 18px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    font-weight: 500;
}
.adv-offers-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.adv-no-offers-message {
    color: #888;
    font-style: italic;
    padding: 15px;
    text-align: center;
    background-color: rgba(42, 45, 47, 0.5);
    border-radius: 6px;
}

/* --- Offer Card Styling --- */
.adv-offer-card {
    background-color: #2a2d2f;
    border: 1px solid #40454a;
    border-left: 4px solid #f1c40f; /* Yellow border for offers */
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.adv-offer-card .adv-card-value.original-price {
    text-decoration: line-through;
    color: #95a5a6;
    font-size: 0.9em;
}
.adv-offer-card .adv-card-row-note {
    padding: 8px 0;
    border-top: 1px solid #383e44;
    border-bottom: 1px solid #383e44;
}
.adv-card-actions .adv-button-retract,
.adv-card-actions .adv-button-reject,
.adv-card-actions .adv-button-accept,
.adv-card-actions .adv-button-message {
    padding: 7px 14px;
    font-size: 0.8em;
    font-weight: 500;
    border-radius: 5px;
    color: #ffffff;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease-out;
    line-height: 1.2;
}
.adv-card-actions .adv-button-retract { background-color: #f39c12; border-color: #f39c12; }
.adv-card-actions .adv-button-retract:hover { background-color: #e67e22; }
.adv-card-actions .adv-button-reject { background-color: #c84038; border-color: #c84038; }
.adv-card-actions .adv-button-reject:hover { background-color: #a3342d; }
.adv-card-actions .adv-button-accept { background-color: #27ae60; border-color: #27ae60; }
.adv-card-actions .adv-button-accept:hover { background-color: #229954; }
.adv-card-actions .adv-button-message { background-color: #5865F2; border-color: #5865F2; }
.adv-card-actions .adv-button-message:hover { background-color: #4a58dd; }

/* Responsive adjustments for offers grid */
@media (max-width: 992px) {
    .adv-my-offers-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Offer History Section --- */
.adv-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}
.adv-section-header h3 {
    margin: 0;
}
#adv-toggle-offer-history {
    padding: 8px 18px;
    font-size: 0.9em;
    font-weight: 500;
    color: #e0e0e0;
    background-color: #3a3f44;
    border: 1px solid #555a61;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#adv-toggle-offer-history:hover {
    background-color: #4f545c;
}

.adv-offer-history-column h4 {
    font-size: 1.3em;
    color: #e8e6e3;
    margin-bottom: 18px;
    padding-bottom: 10px;
    font-weight: 500;
}
.adv-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.adv-history-table th,
.adv-history-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #383e44;
}
.adv-history-table thead th {
    font-weight: 600;
    color: #b0b7c1;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}
.adv-history-table tbody tr:hover {
    background-color: #303336;
}
.adv-status-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}
.status-pending { background-color: #f1c40f; }
.status-accepted, .status-sold { background-color: #27ae60; }
.status-rejected { background-color: #c84038; }
.status-retracted, .status-expired { background-color: #95a5a6; }
.adv-button-message-small {
    padding: 5px 10px;
    font-size: 0.9em;
    background-color: #5865F2;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.adv-button-message-small:hover {
    background-color: #4a58dd;
}

/* Responsive */
@media (max-width: 992px) {
    #adv-offer-history-container {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .adv-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* Styling for In-Game Name on Offer Card */
.adv-card-item-name-group {
    display: flex;
    flex-direction: column;
}
.adv-card-offer-meta {
    font-size: 0.8em;
    color: #a0a7b1;
    font-style: italic;
    margin-top: 3px;
}

/* --- Responsive Offer History Table --- */

@media screen and (max-width: 768px) {
    .adv-history-table {
        border: none;
    }
    .adv-history-table thead {
        display: none; /* Hide table headers on mobile */
    }
    .adv-history-table tr {
        display: block;
        border-radius: 8px;
        border: 1px solid #40454a;
        margin-bottom: 20px;
        background-color: #2a2d2f;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
    .adv-history-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        border-bottom: 1px solid #383e44;
        text-align: right; /* Align value to the right */
    }
    .adv-history-table td:last-child {
        border-bottom: none;
    }
    .adv-history-table td::before {
        content: attr(data-label); /* Use the data-label from the PHP */
        float: left;
        font-weight: 600;
        text-transform: uppercase;
        color: #b0b7c1;
        font-size: 0.9em;
        text-align: left; /* Align the label to the left */
        margin-right: 15px;
    }
    .adv-history-table .adv-status-badge {
        font-size: 0.9em; /* Make status badge slightly bigger on mobile */
    }
}

/* --- My Listings History Section --- */
.adv-my-listings-history-section {
    margin-top: 30px;
    color: #e0e0e0;
}
.adv-my-listings-history-section h3 {
    font-size: 1.6em;
    color: #ffffff;
    margin-bottom: 25px;
    font-weight: 600;
    text-align: left;
}
.adv-listings-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.adv-listings-history-column h4 {
    font-size: 1.3em;
    color: #e8e6e3;
    margin-bottom: 18px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    font-weight: 500;
}
.adv-listings-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.adv-listing-history-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background-color: #2a2d2f;
    border-radius: 6px;
    border-left: 3px solid #4a4f56;
    font-size: 0.9em;
}
.history-item-details {
    flex: 1 1 35%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-weight: 500;
}
.history-item-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.history-item-details span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-item-price {
    flex: 0 1 15%;
    color: #c0c0c0;
    text-align: right;
}
.history-item-quantity {
    flex: 0 1 10%;
    color: #c0c0c0;
    text-align: right;
}
.history-item-type {
    flex: 0 1 10%;
    font-weight: 600;
    text-align: center;
}
.history-item-type.type-sell {
    color: #e74c3c;
}
.history-item-type.type-buy {
    color: #2ecc71;
}
.history-item-status {
    flex: 0 1 15%;
    text-align: center;
}

/* Status Badge Styles (from Admin) */
.adv-status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    line-height: 1.2;
}
.status-active { background-color: #2271b1; }
.status-removed_by_user { background-color: #949494; }
.status-expired { background-color: #d63638; }
.status-sold { background-color: #00a32a; }

.adv-no-history-message {
    color: #888;
    font-style: italic;
    padding: 10px;
    text-align: center;
    background-color: rgba(42, 45, 47, 0.5);
    border-radius: 6px;
    font-size: 0.9em;
}

/* Responsive History Grid */
@media screen and (max-width: 992px) {
    .adv-listings-history-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    .adv-listing-history-item {
        flex-direction: column;
        align-items: stretch;
        padding: 15px;
    }
    .adv-listing-history-item > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right !important;
        padding: 6px 0;
        border-bottom: 1px solid #383e44;
    }
    .adv-listing-history-item > div:last-child {
        border-bottom: none;
    }
    .adv-listing-history-item > div::before {
        content: attr(data-label);
        font-weight: 600;
        color: #b0b7c1;
        text-align: left;
    }
    .history-item-details {
        border: none;
        padding: 0;
        margin-bottom: 10px;
    }
    .history-item-details::before {
        display: none;
    }
}

/* --- Dashboard Section Header w/ Button --- */
.adv-my-listings-section .adv-section-header,
.adv-my-offers-section .adv-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
}
.adv-my-listings-section .adv-section-header h3,
.adv-my-offers-section .adv-section-header h3 {
    margin: 0;
    border: none;
    padding: 0;
}
.adv-button-secondary {
    padding: 8px 18px;
    font-size: 0.9em;
    font-weight: 500;
    color: #e0e0e0;
    background-color: #3a3f44;
    border: 1px solid #555a61;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.adv-button-secondary:hover {
    background-color: #4f545c;
}

/* --- Mark as Sold/Bought Button --- */
.adv-card-actions .adv-button-mark-sold {
    padding: 7px 14px;
    font-size: 0.8em;
    font-weight: 500;
    border-radius: 5px;
    color: #ffffff;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease-out;
    line-height: 1.2;
    background-color: #27ae60; /* Green color */
    border-color: #27ae60;
}
.adv-card-actions .adv-button-mark-sold:hover {
    background-color: #229954;
}

/* Adjustments for the new button in the actions row */
.adv-card-actions {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
    gap: 8px;
    justify-content: flex-end;
}

/* --- Item Page - Visual Hierarchy for API Sections --- */

/* The section title's border will be colored, but the title text remains white. */
.adv-item-page-container .adv-price-history .adv-section-title,
.adv-item-page-container .adv-current-prices .adv-section-title {
    border-bottom-color: #E5B873; /* A deep, yet subtle gold/orange hue */
}

#adv-offer-history-container.adv-offer-history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
@media (max-width: 992px) {
    #adv-offer-history-container.adv-offer-history-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Chat Notification Bubble --- */
.adv-button-chat {
    background-color: #7289da; /* Discord-like blue */
    border-color: #7289da;
    color: #ffffff;
}
.adv-button-chat:hover {
    background-color: #677bc4;
    border-color: #677bc4;
}

/* Position and squared style for the bubble on the main chat button */
.adv-user-menu-button.adv-button-chat {
    position: relative; /* This is crucial for the absolute positioning of the child bubble */
}

/* --- Corrected "My Offers" History Layout --- */

/* This rule ensures the main container is hidden by default and has the top border */
#adv-offer-history-container {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* This rule styles the inner grid that holds the two columns */
#adv-offer-history-container .adv-offer-history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

/* This styles the H4 titles inside each column */
#adv-offer-history-container .adv-offer-history-column h4 {
    font-size: 1.3em;
    color: #e8e6e3;
    margin-bottom: 18px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    font-weight: 500;
}

/* This ensures the "Load More" button is centered below the grid */
#adv-offer-history-container .adv-load-more-container {
    text-align: center;
    margin-top: 20px;
}

/* This styles the button itself */
.adv-load-more-container .adv-load-more-offers-btn {
    width: auto;
    min-width: 150px;
}

/* ============================================= */
/* === CHAT NOTIFICATION BUBBLE (GLOBAL) === */
/* ============================================= */

/* Make the parent button a positioning anchor */
.adv-user-menu-button.adv-button-chat {
    position: relative !important;
}

/* Base style for the bubble. It is HIDDEN by default. */
.adv-chat-notification-bubble {
    display: none;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background-color: #f04747;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: absolute;
    z-index: 10;
    justify-content: center;
    align-items: center;
}

/* This class, added by JS, makes the bubble VISIBLE. */
.adv-chat-notification-bubble.is-visible {
    display: flex !important;
}

/* Positioning for bubbles in the main menu (desktop/mobile) */
.adv-user-menu-button.adv-button-chat .adv-chat-notification-bubble {
    top: -8px;
    right: -8px;
    border-radius: 4px; /* Squared style */
}

.adv-listing-type-header.adv-type-offer-header { 
    border-left: 3px solid #f1c40f; 
    padding-left: 8px; 
}

/* --- Custom Scrollbar for Omnisearch Results --- */
/* For Firefox */
.adv-omnisearch-results {
  scrollbar-width: thin;
  scrollbar-color: #4f545c #2a2d2f;
}

/* For Webkit browsers (Chrome, Safari, Edge) */
.adv-omnisearch-results::-webkit-scrollbar {
  width: 8px;
}

.adv-omnisearch-results::-webkit-scrollbar-track {
  background: #2a2d2f;
  border-radius: 4px;
}

.adv-omnisearch-results::-webkit-scrollbar-thumb {
  background-color: #4f545c;
  border-radius: 4px;
  border: 2px solid #2a2d2f;
}

.adv-omnisearch-results::-webkit-scrollbar-thumb:hover {
  background-color: #5a6069;
}

/* --- Form Field & Notice Styling --- */
.adv-form-field-notice {
    display: block;
    font-size: 0.8em;
    font-weight: 500;
    color: #a0a7b1;
    margin-top: 6px; /* Creates space between the input above and the notice. */
    line-height: 1.4; /* Improves readability for multi-line text. */
}

/* --- Dynamic JS Tooltip --- */
.adv-dynamic-tooltip {
    position: fixed; /* Use fixed positioning to escape all containers */
    z-index: 9999;   /* High z-index to appear on top of everything */
    background-color: #1e222e;
    color: #e0e0e0;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #4a4f56;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none; /* The tooltip itself should not be interactive */

    /* Animation */
    opacity: 0;
    transform: translateY(5px); /* Start slightly lower */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.adv-dynamic-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0); /* Move to final position */
}

/* --- Omnisearch Recent Searches Header --- */
.adv-omnisearch-results li.adv-results-header span {
    display: block;
    padding: 8px 15px;
    font-size: 0.8em;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    background-color: #25282b;
    border-bottom: 1px solid #383b3d;
    cursor: default;
    text-align: left;
    font-style: normal;
}

/* --- Animation & Container Styles for Jolt-Free Live Feed --- */

/* The container must be relative to anchor the absolutely positioned outgoing cards. */
.adv-listings-card-container {
    position: relative;
}

/* Keyframes for the old card fading and sliding down */
@keyframes fadeOutAndSlide {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(50px);
    }
}

/* Class applied by JS to a card that is being removed */
.adv-public-listing-card.adv-card-removing {
    z-index: 0; /* Ensure it goes behind other cards */
    animation: fadeOutAndSlide 0.6s ease-in-out forwards;
}

/* Custom style for the verification link in the error message */
#adv-ingame-name-notice.error-text a,
#adv-popup-ingame-name-notice.error-text a {
    color: #e2e2e2;
    font-weight: 600;
    text-decoration: none;
}

#adv-ingame-name-notice.error-text a:hover,
#adv-popup-ingame-name-notice.error-text a:hover {
    color: #f5f5f5;
    text-decoration: underline;
}

/* --- In-Card Listing Edit Styles --- */

/* Hide edit elements by default */
.adv-listing-card .adv-edit-input,
.adv-listing-card .adv-card-edit-actions {
    display: none;
}

/* When .is-editing is active on the card, hide the view elements */
.adv-listing-card.is-editing .adv-view-value,
.adv-listing-card.is-editing .adv-card-actions {
    display: none;
}

/* When .is-editing is active, show the edit elements */
.adv-listing-card.is-editing .adv-edit-input,
.adv-listing-card.is-editing .adv-card-edit-actions {
    display: flex; /* Use flex for alignment */
}

/* Style for the input fields inside the card */
.adv-listing-card .adv-edit-input {
    padding: 6px 10px;
    font-size: 0.9em;
    height: 34px; /* A bit smaller for in-card use */
}

/* Container for the Save/Cancel buttons */
.adv-card-edit-actions {
    gap: 10px;
    align-items: center;
}

/* Shared styles for all new action buttons */
.adv-button-edit,
.adv-button-save,
.adv-button-cancel {
    padding: 7px 14px;
    font-size: 0.8em;
    font-weight: 500;
    border-radius: 5px;
    color: #ffffff;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease-out;
}

/* Specific button colors */
.adv-button-edit { background-color: #4f545c; border-color: #656b74; }
.adv-button-edit:hover { background-color: #5a6069; }

.adv-button-cancel { background-color: #7f8c8d; border-color: #7f8c8d; }
.adv-button-cancel:hover { background-color: #95a5a6; }

.adv-button-save { background-color: #27ae60; border-color: #27ae60; }
.adv-button-save:hover { background-color: #229954; }

.adv-button-verification {
    padding: 8px 18px;
    font-size: 0.9em;
    font-weight: 500;
    color: #ffffff;
    background-color: #1abc9c; /* Teal */
    border: 1px solid #16a085;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.adv-button-verification:hover {
    background-color: #16a085;
    transform: translateY(-1px);
}

.adv-input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
}

.adv-input-with-suffix .adv-input-suffix {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em;
    font-weight: 500;
    color: #888;
    pointer-events: none;
    display: none; /* Hidden by default */
}

.adv-input-with-suffix.is-percentage .adv-input-suffix {
    display: block; /* Shown by JS */
}

.adv-input-with-suffix.is-percentage input {
    padding-right: 30px; /* Make space for the '%' sign */
}

.adv-form-column-full-width {
    flex-basis: 100%;
    border-top: 1px solid #444;
    padding-top: 25px;
    margin-top: 10px;
}

/* --- Awakened Trait Form Fields (Consolidated & Fixed) --- */
.adv-traits-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.adv-trait-group {
    /* Defines the group's size and behavior as an item in the row */
    flex: 0 0 calc((100% - 40px) / 3); /* Fixed width: 1/3 of the container minus gaps */
    min-width: 280px;

    /* Defines the group's internal layout for its children (label/input) */
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.adv-form-input.is-invalid {
    border-color: #e74c3c !important;
    background-color: rgba(231, 76, 60, 0.1) !important;
}

/* --- Trait Visibility Control --- */
.adv-trait-group.is-hidden {
    display: none;
}

/* --- Awakened Traits on Item Page --- */
.adv-awakened-traits-container {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid #383e44;
}

.adv-awakened-trait {
    font-size: 0.85em;
    color: #c0c0c0;
    display: flex;
    justify-content: space-between;
}

.trait-name {
    font-weight: 600;
    color: #e0e0e0;
}

.trait-value {
    font-weight: 500;
    color: #FEE96B; /* Awakened Yellow */
}

/* --- Item Page - Awakened Traits on Card (Horizontal Layout) --- */

.adv-itempage-listing-card .adv-card-item-icon {
    width: 50px; /* Reset icon size */
    height: 50px;
}

.adv-itempage-listing-card {
    flex-direction: column; /* Main card stacks main content and traits row */
    align-items: stretch;
    gap: 0; /* Remove gap between main content and trait row */
}

.adv-itempage-card-main-content {
    display: flex;
    align-items: center;
    gap: 15px; /* Gap between icon, col1, col2, etc. */
}

.adv-awakened-traits-row {
    display: flex;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #383d42;
}

.adv-awakened-trait-column {
    flex: 1;
    padding: 0 10px;
    border-right: 1px solid #383d42;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    min-height: 3em; /* Ensure empty columns have height */
}

.adv-awakened-trait-column:last-child {
    border-right: none;
}

.adv-awakened-trait-column .trait-name {
    font-size: 0.8em;
    font-weight: 500;
    color: #b0b7c1;
}

.adv-awakened-trait-column .trait-value {
    font-size: 0.9em;
    font-weight: 600;
    color: #FEE96B; /* Awakened Yellow */
}

/* --- Dashboard - Awakened Traits on Card --- */
.adv-listing-card.has-traits {
    gap: 10px; /* Adjust gap to look good with the new row */
}

.adv-card-row-traits {
    padding: 10px 0;
    border-top: 1px solid #383e44;
}

/* Trait View State */
.adv-awakened-traits-view {
    display: flex;
}
.adv-awakened-trait-column {
    flex: 1;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 2px;
}
.adv-awakened-trait-column .trait-name {
    font-size: 0.8em;
    font-weight: 500;
    color: #b0b7c1;
}
.adv-awakened-trait-column .trait-value {
    font-size: 0.9em;
    font-weight: 600;
    color: #FEE96B;
}

/* Trait Edit State */
.adv-awakened-traits-edit {
    display: none; /* Hidden by default */
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
}
.adv-listing-card.is-editing .adv-awakened-traits-edit {
    display: flex;
}
.adv-awakened-traits-edit .adv-trait-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    min-width: 0; /* Prevents flex items from overflowing due to long content */
}
.adv-awakened-traits-edit .adv-trait-group select,
.adv-awakened-traits-edit .adv-trait-group input {
    width: 100%;
    box-sizing: border-box; /* Ensures padding is included in the width */
    height: 36px;
    font-size: 0.85em;
}

/* --- Trait Hover Popup --- */
.adv-trait-hover-popup {
    position: fixed;
    z-index: 9998;
    background-color: rgba(42, 45, 47, 0.92);
    border: 1px solid rgba(74, 79, 86, 0.92);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    padding: 12px;
    box-sizing: border-box;

    /* Animation & Interactivity */
    opacity: 0;
    pointer-events: none; /* Prevents interaction when invisible */
    transition: opacity 0.2s ease-in-out; /* Smooth fade for both in and out */
}

.adv-trait-hover-popup.is-visible {
    opacity: 1;
    pointer-events: auto; /* Allows interaction (like moving mouse over it) when visible */
}

/* Hide trait popup completely on mobile devices */
@media (max-width: 768px) {
    .adv-trait-hover-popup {
        display: none !important;
    }
}

/* Use the same internal layout as the single item page */
.adv-trait-hover-popup .adv-awakened-traits-row {
    display: flex;
    border-top: none; /* No border needed inside popup */
    padding-top: 0;
    margin-top: 0;
}

.adv-trait-hover-popup .adv-awakened-trait-column {
    flex: 1;
    padding: 0 10px;
    border-right: 1px solid #383d42;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.adv-trait-hover-popup .adv-awakened-trait-column:last-child {
    border-right: none;
}

.adv-trait-hover-popup .trait-name {
    font-size: 0.8em;
    font-weight: 500;
    color: #b0b7c1;
}

.adv-trait-hover-popup .trait-value {
    font-size: 0.9em;
    font-weight: 600;
    color: #FEE96B;
}

.adv-public-listing-card.has-traits:hover {
    /* Optional: Add a subtle indicator on the card itself */
    border-color: #FEE96B;
}

/* --- Item Page - Awakened Traits Filter Group --- */
.adv-listings-filter-controls .traits-group .traits-inputs {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 10px;
}

.adv-listings-filter-controls .traits-group .adv-itempage-filter-select {
    min-width: 160px;
    flex-grow: 1;
}

@media (max-width: 992px) {
    .adv-listings-filter-controls .traits-group {
        width: 100%;
    }
    .adv-listings-filter-controls .traits-group .traits-inputs {
        flex-direction: column;
    }
}

/* --- Awakened Trait Icons --- */
.adv-awakened-trait-column .trait-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.adv-awakened-trait-column .adv-trait-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    object-fit: contain;
}

/* --- Custom Select with Icons --- */
.adv-custom-select-container {
    position: relative;
    display: block; /* Use block for better flexbox compatibility */
    width: 100%;
    height: 42px; /* Match existing filter height */
}

/* This is the visible part of the dropdown */
.adv-select-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 35px 8px 12px; /* Add right padding for the arrow */
    font-size: 0.9em;
    font-weight: 500;
    color: #c0c0c0;
    background-color: #2a2d2f;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative; /* For positioning the arrow */
}

.adv-select-selected:hover {
    border-color: #666;
}

.adv-select-selected img.adv-trait-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* The dropdown arrow */
.adv-select-selected::after {
    content: '';
    border: solid #c0c0c0;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    position: absolute;
    right: 15px;
    top: 15px;
    transition: transform 0.2s ease;
}

/* Point arrow up when open */
.adv-select-selected.select-arrow-active::after {
    transform: rotate(-135deg);
}

/* The list of options */
.adv-select-items {
    position: absolute;
    background-color: #2a2d2f;
    border: 1px solid #444;
    border-radius: 6px;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 99;
    max-height: 250px;
    overflow-y: auto;
}

.adv-select-items div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #383e44;
    color: #e0e0e0;
}

.adv-select-items div:last-child {
    border-bottom: none;
}

.adv-select-items div:hover {
    background-color: #36393f;
}

.adv-select-items img.adv-trait-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Hide the original select element and the options list by default */
.adv-select-hide {
    display: none;
}

/* Custom scrollbar for options list */
.adv-select-items {
  scrollbar-width: thin;
  scrollbar-color: #4f545c #2a2d2f;
}
.adv-select-items::-webkit-scrollbar {
  width: 8px;
}
.adv-select-items::-webkit-scrollbar-track {
  background: #2a2d2f;
  border-radius: 4px;
}
.adv-select-items::-webkit-scrollbar-thumb {
  background-color: #4f545c;
  border-radius: 4px;
  border: 2px solid #2a2d2f;
}

/* --- Fix for Custom Select Container Width --- */
.traits-group .adv-custom-select-container {
    width: 170px;
    min-width: 150px;
}

@media (max-width: 1280px) {
    /* --- Responsive Fix for Custom Select Container --- */
    .traits-group .adv-custom-select-container {
        width: 100%;
    }
}

/* --- Form Custom Select Unification --- */
.adv-form-container .adv-custom-select-container .adv-select-selected,
.adv-popup-content .adv-custom-select-container .adv-select-selected {
    background-color: #1e222e;
    border: 1px solid #4a4f56;
    border-radius: 6px;
    height: 46px;
    color: #e0e0e0;
    font-size: .95em;
    padding: 12px 35px 12px 15px; /* Adjust padding to match and account for arrow */
}

.adv-form-container .adv-custom-select-container .adv-select-selected:hover,
.adv-popup-content .adv-custom-select-container .adv-select-selected:hover {
    border-color: #5865F2;
}

.adv-form-container .adv-custom-select-container .adv-select-selected.select-arrow-active,
.adv-popup-content .adv-custom-select-container .adv-select-selected.select-arrow-active {
    border-color: #5865F2;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, .25);
}

.adv-form-container .adv-custom-select-container,
.adv-popup-content .adv-custom-select-container {
    height: 46px;
}

/* --- Strain Input Field Styles --- */
.adv-input-with-suffix.is-strain .adv-input-suffix {
    display: block;
}

.adv-input-with-suffix.is-strain input {
    padding-right: 30px;
}

.adv-strain-row {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #444;
}

/* Strain row on "My Listings" card */
.adv-card-row-strain {
    padding-top: 10px;
    border-top: 1px solid #383e44;
}

.adv-card-row-strain .adv-card-field {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.adv-card-row-strain .adv-card-label {
    margin-bottom: 0;
}

.adv-card-row-strain .adv-edit-input {
    max-width: 150px;
}

/* --- Item Page - Strain Row --- */
.adv-itempage-strain-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #383e44;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
}

.adv-itempage-strain-row .adv-itempage-card-label {
    margin-bottom: 0;
    color: #b0b7c1;
    font-size: .8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.adv-itempage-strain-row .strain-value {
    font-weight: 600;
    color: #FEE96B; /* Awakened Yellow */
}

/* --- Trait Hover Popup - Strain Row Styling --- */
.adv-trait-hover-popup .adv-itempage-strain-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

/* Add a separator ONLY if a traits row comes before a strain row */
.adv-trait-hover-popup .adv-awakened-traits-row + .adv-itempage-strain-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #4a4f56;
}

.adv-trait-hover-popup .adv-itempage-strain-row .adv-itempage-card-label {
    font-size: .8em;
    font-weight: 600;
    text-transform: uppercase;
    color: #b0b7c1;
}

.adv-trait-hover-popup .adv-itempage-strain-row .strain-value {
    font-weight: 600;
    color: #FEE96B;
}

/* --- User Online Indicator on Listing Cards --- */
.adv-card-user-info,
.adv-itempage-card-user-info {
    gap: 6px; /* Adjust gap to accommodate the new dot */
}

.adv-user-online-indicator {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    background-color: #2ecc71; /* Green */
    border-radius: 50%;
    border: 1px solid #181a1b; /* Dark border for contrast */
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.6); /* Subtle glow */
    display: inline-block;
    vertical-align: middle;
    /* The tooltip is handled by the browser's default for the 'title' attribute */
}

/* --- Price & Receive Offers Combined Field --- */
.adv-price-offer-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

/* Style for the new toggle button */
.adv-form-button-toggle {
    height: 46px; /* Match input height */
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
    
    /* Default "Ghost" State */
    background-color: transparent;
    border: 2px solid rgb(74, 79, 86);
    color: #5865F2;
}

.adv-form-button-toggle:hover {
    background-color: rgba(88, 101, 242, 0.1);
}

/* Active "Deactivate" state (filled in) */
.adv-form-button-toggle.is-active {
    background-color: #5865F2;
    border-color: #5865F2;
    color: #ffffff;
}

.adv-form-button-toggle.is-active:hover {
    background-color: #4a58dd;
}

/* Style for the disabled price input */
#adv-listing-price:disabled {
    background-color: #303336 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Offer Link Styling on Listing Cards --- */
.is-offer-link {
    font-weight: 600 !important;
    color: #5865F2 !important; /* Site accent color */
    text-decoration: none;
    transition: color 0.2s ease;
}

.is-offer-link:hover {
    color: #7b88ff !important;
    text-decoration: underline;
}

/* --- User Menu Shortcode Styles --- */
.adv-user-menu-container {
    display: flex;
    flex-direction: row; /* Changed from column */
    align-items: center;
    justify-content: center; /* Center the whole group */
    gap: 10px; /* Space between button group and switcher */
    padding: 5px 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* --- Language Switcher --- */
.adv-language-switcher {
    position: relative;
}

.adv-lang-current {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 38px; /* Match button height */
    border: 1px solid #555a61;
    background-color: #3a3f44;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.adv-lang-current:hover {
    background-color: #4f545c;
}

.adv-lang-flag {
    display: inline-block;
    width: 24px;
    height: 18px; /* Adjusted for a 4:3 ratio */
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    /* Added to align the image vertically */
    display: flex;
    align-items: center;
    justify-content: center;
}

.adv-lang-flag img { /* Changed from svg to img */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* This ensures the image scales to fit */
}

.adv-lang-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 220px;
    background-color: #2a2d2f;
    border: 1px solid #444;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
    display: none; /* Hidden by default */
}

.adv-lang-dropdown.is-open {
    display: block;
}

.adv-lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    text-decoration: none;
    color: #e0e0e0;
    transition: background-color 0.2s;
}

.adv-lang-option:hover {
    background-color: #5865F2;
    color: #fff;
}

.adv-lang-name {
    font-size: 0.9em;
    font-weight: 500;
}